About 


Services Team 


Blog 


(第 2 版 ) 


, Photoshop CC 
”网 页 配色 设计 全 程 揭 秘 


500 个 配色 解析 插图 


50 个 配色 案例 


殉 


如 长 时 间 保 ; | 


gh 


Bd 7 ed I 


本 本 
5h2o7)-LEAyTr 


人 


Book features 


韦 弯 弯 编著 


Contact 


内 容 全 面 ， 循 序 渐进 
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内 容 简 介 


本 书 是 一 本 关于 网 页 配色 设计 的 经 典 之 作 ， 以 Photoshop CC 为 设计 工具 ， 对 网 页 设计 的 配色 技巧 和 原 
理 进行 了 全 面 、 细 致 的 剖析 。 

本 书 首先 从 理论 方面 介绍 了 网 页 配色 的 一 些 基础 知识 ， 包 括 色彩 基础 知识 、 网 页 配色 要 求 和 规范 、 
网 页 配色 的 基本 方法 、 网 页 配色 的 选择 标准 、 网 页 配色 的 色彩 情感 等 内 容 ， 然 后 着 重 选 择 了 7 种 常用 的 色 
系 ， 分 别 对 它们 的 色彩 意象 进行 详细 分 析 ， 配 合 配色 案例 的 讲解 ， 使 读者 在 掌握 软件 功能 的 同时 迅速 提高 
网 页 配色 效率 ， 极 大 地 提高 从 业 素质 。 

本 书 结构 清晰 ， 案 例 经 典 ， 技 术 实用 ， 适 合 网 页 配色 设计 初 、 中 级 读者 ， 包 括 广大 网 页 设计 爱好 者 、 
网 页 设计 工作 者 ， 也 可 以 作为 高 等 院 校 网 页 配色 设计 课程 的 教材 。 


本 书 封 面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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在 高 速 发 展 的 数字 化 信息 时 代 ， 浏 览 网 站 逐渐 成 为 人 们 获取 信息 的 最 重要 方式 ， 影 响 着 人 们 工 
作 和 生活 的 方方面面 。 各 公司 、 团 体 、 机 构 越 来 越 多 地 使 用 网 站 进行 品牌 建设 、 信 息 发 布 和 商业 活 
动 的 宣传 及 推广 ， 因 此 网 页 设计 在 人 们 工作 和 生活 中 占据 着 越 来 越 重要 的 地 位 。 

随 着 人 们 品位 的 不 断 提升 ， 是 否 能 够 吸引 人 们 的 目光 ， 引 起 人 们 的 注意 成 为 网 页 设计 的 关键 ， 
因此 如 何 进行 网 页 配色 ， 使 用 丰富 、 绚 丽 和 别具一格 的 色彩 吸引 浏览 者 的 眼球 ， 留 住人 们 的 视线 成 
为 广大 网 页 设计 人 员 需 要 重视 的 内 容 ， 如 何 通过 网 页 配色 ， 构 建 出 符合 受众 心理 预期 的 网 页 设计 作 
品 成 为 网 页 设计 的 一 门 必 修 课 , 这 门 课程 值得 广大 网 页 设计 师 们 投入 巨大 的 精力 来 进行 学 习 和 研究 。 

本 书 从 基本 的 色彩 产生 、 色 彩 构 成 等 内 容 开始 由 浅 入 深 、 循 序 渐进 地 讲解 网 页 配色 ， 全 面 细致 
地 讲解 了 网 页 设计 配色 的 相关 知识 和 技巧 ， 通 过 大 量 漂亮 的 国内 外 网 页 作品 进行 具体 颜色 的 分 析 ， 
并 通过 各 行 各 业 的 网 页 案例 深化 配色 原理 , 对 于 网 页 设计 初学 者 来 讲 , 是 一 本 难得 的 实用 型 自学 教程 。 
全 书 共 分 17 章 ， 每 章 内 容 介绍 如 下 。 

第 1 章 : 主要 讲解 色彩 和 网 页 配色 的 基础 知识 ， 包 括 色彩 知识 入 门 、 色 彩 的 传达 意义 、 颜 色 模 
式 和 网 页 安全 色 、 常 用 色彩 的 名 称 和 分 类 、 色 彩 的 属性 、 单 色 印象 空间 、 配 色 印象 空间 等 内 容 。 

第 2 章 : 主要 讲解 网 页 配色 的 要 求 和 规范 , 包括 色彩 的 对 比 、 大 小 、 位 置 、 搭 配 原则 等 常用 规范 ， 
色彩 的 主 次 、 重 点 、 层 次 等 色彩 比例 的 运用 标准 和 要 求 。 

第 3 章 : 主要 讲解 网 页 配色 的 基本 方法 ， 包 括 网 页 配色 的 整体 结构 、 网 页 文字 颜色 、 网 页 中 图 
片 的 使 用 、 网 页 中 线条 与 图 形 的 使 用 和 网 页 元 素 的 色彩 搭配 等 内 容 。 

第 4 章 : 主要 讲解 网 页 配色 的 选择 标准 ， 包 括 根据 行业 、 浏 览 者 偏好 、 季 节 、 商 品 销售 阶段 等 
选择 网 页 的 颜色 。 

第 5 章 : 主要 讲解 如 何 运 用 色彩 情感 进行 网 页 配色 , 包括 网 页 配色 的 冷暖 、 轻 与 重 的 色彩 感觉 、 
明度 与 纯度 的 质感 、 波 长 和 成 像 的 进退 感 、 脱 胀 与 收缩 的 视觉 感应 、 色 彩 的 华丽 感 与 村 实感、 色彩 
的 宁静 感 与 兴奋 感 ， 以 及 色彩 的 活力 感 与 庄重 感 。 

第 6 章 : 主要 讲解 网 页 配色 中 色彩 对 比 的 应 用 , 包括 冷暖 对 比 的 配色 、 色彩 在 页 面 中 的 面积 对 比 、 
色相 和 色调 对 比 、 同 时 对 比 以 及 连续 对 比 等 在 网 页 配色 中 的 运用 和 影响 。 

第 7 章 : 主要 对 红色 系 进行 详细 的 介绍 ， 包 括 正 红 、 深 红色 、 朱 红色 、 玫 瑰 红 、 紫 红色 和 宝石 
红 6 种 颜色 ,讲解 了 红色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 8 章 : 主要 对 橙色 系 进行 详细 的 介绍 ， 包 括 正 橙色 、 太 阳 橙 、 查 黄色 、 浅 土 色 、 另 啡 色 和 棕 
色 6 种 颜色 ， 讲 解 了 橙色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 9 章 : 主要 对 黄色 系 进 行 详细 的 介绍 ， 包 括 鲜 黄色 、 含 羞 草 色 、 铬 黄色 、 香 槟 黄 和 淡 黄 色 5 
种 颜色 ， 讲 解 了 黄色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 10 章 : 主要 对 绿色 系 进行 详细 的 介绍 ， 包 括 苹果 绿 、 翡 翠绿 、 黄 绿色 、 浓 绿色 、 浅 绿色 和 和 孔 
八 绿 6 种 颜色 ,讲解 了 绿色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 11 章 : 主要 对 蓝 色 系 进行 详细 的 介绍 ， 包 括 天 蓝 色 、 水 蓝 色 、 深 蓝 色 、 浅 蓝 色 、 蔚 蓝 色 和 深 
青色 6 种 颜色 ,讲解 了 蓝 色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 
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第 12 章 主要 对 紫色 系 进行 详细 的 介绍 , 包括 丁香 紫 、 正 紫色 、 深 紫色 、 曹 蒲 色 和 浅 莲 灰 5 种 颜色 ， 
讲解 了 紫色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 13 章 : 主要 对 无 彩色 系 进行 详细 的 介绍 , 包括 白色 、 蓝 灰色 、 中 灰色 、 浅 灰色 和 黑色 5 种 颜色 ， 
讲解 了 无 彩色 系 在 网 页 配色 中 的 运用 和 色彩 效果 。 

第 14 章 : 主要 讲解 不 同色 调 的 网 页 配色 ， 包 括 网 页 配色 的 色调 特点 、 个 性 鲜明 的 色调 、 清 静 高 
雅 的 色调 、 朴 实 深厚 的 中 庸 色 调和 稳重 深沉 的 色调 等 相关 色调 的 构建 和 技能 。 

第 15 章 : 主要 讲解 如 何 构造 网 页 配色 的 视觉 印象 ， 包 括 女性 化 的 网 页 配色 印象 、 男 性 化 的 网 页 
配色 印象 、 稳 定安 静 的 网 页 配色 印象 、 兴 奋 激昂 的 网 页 配色 印象 、 轻 快 律动 的 网 页 配色 印象 、 清 爽 
自然 的 网 页 配色 印象 、 浪 漫 甜美 的 网 页 配色 印象 、 传 统 稳重 的 网 页 配色 印象 、 雍 容 华贵 的 网 页 配色 
印象 和 艳丽 的 网 页 配色 印象 。 

第 16 章 : 主要 讲解 网 页 配色 的 调整 方法 ， 包 括 突出 主题 的 配色 技巧 和 整体 融合 的 配色 技巧 。 

第 17 章 : 主要 对 3 款 便捷 、 高 效 的 配色 软件 一 一 Colorkey Xp、Adobe Color Themes 和 
ColorSchemer Studio 的 获取 、 安 装 、 使 用 和 配色 方法 进行 讲解 , 并 对 各 种 配色 关系 进行 了 讲解 和 分 析 ， 
非常 直观 地 展示 了 各 种 配色 方案 带 来 的 视觉 感受 。 用 户 可 以 通过 这 3 款 软件 搭配 出 符合 期 待 的 网 页 
配色 ， 并 创建 自己 的 配色 方案 ， 通 过 使 用 软件 经 验 数 据 科学 有 效 地 进行 网 页 配色 ， 以 提高 工作 效率 。 

本 书 由 韦 弯 弯 编 著 ， 另 外 ， 张 晓 景 、 李 晓 斌 、 高 鹏 、 胡 敏 敏 、 张 国 勇 、 贾 勇 、 林 秋 、 胡 卫 东 、 
姜 玉 声 、 周 晓 丽 、 郭 慧 等 人 也 参与 了 部 分 编写 工作 。 本 书 在 写作 过 程 中 力求 严谨 ,由 于 作者 水 平 所 限 ， 
书 中 难免 有 玻 漏 和 不 足 之 处 ， 希 望 广大 读者 批评 、 指 正 ， 欢 迎 与 我 们 沟通 和 交流 。QOQ 群 名 称 : 网 页 
设计 与 开发 交流 群 ，QQ 群 号 : 705894157。 

为 了 方便 读者 学 习 , 本 书 为 每 个 案例 提供 了 教学 视频 ,只 要 扫描 一 下 书 中 案例 名 称 旁 边 的 二 维 码 ， 
即 可 直接 打开 视频 进行 观看 ， 或 者 推送 到 自己 的 邮箱 中 下 载 后 进行 观看 。 本 书 配套 的 附 赠 资源 中 提 
供 了 书 中 所 有 案例 的 教学 视频 和 PPT 课件 , 并 附 赠 海量 实用 资源 。 读 者 在 学 习 时 可 扫描 下 面 的 二 维 码 ， 
然后 将 内 容 推 送 到 自己 的 邮箱 中 ， 即 可 下 载 获取 相应 的 资源 ( 注意 : 请 将 这 两 个 二 维 码 下 的 压缩 文件 
全 部 下 载 完毕 后 ， 再 进行 解压 ， 即 可 得 到 完整 的 文件 内 容 )。 
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第 合 章 色彩 基础 知识 


1 色彩 知识 入 门 了 
白色 的 太阳 光 中 可 以 分 解 出 所 有 颜色 的 可 见 光 ， 每 种 颜色 都 有 着 不 同 的 色彩 意象 ， 如 图 1_1 和 


图 1-2 所 示 为 呈现 不 同 颜色 的 画面 


。 在 人 类 赖 以 生存 的 地 球 上 ， 色 彩 随时 随地 都 在 刺激 着 人 们 的 视 


觉 神经 ， 由 此 对 人 们 的 情绪 变化 产生 影响 。 


17 世纪 末期 ， 英 国 科 学 家 牛顿 进行 了 著名 的 


色散 实验 ， 他 发 现 白色 的 太阳 光 经 过 三 棱镜 的 折 
射 后 , 会 显现 一 条 美丽 的 彩虹 , 颜色 依次 为 红 、 橙 、 


图 1-2 


黄 、 绿 、 青 、 蓝 和 紫 7 种 颜色 ， 如 医 


1-3 所 示 。 
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色彩 是 光照 射 在 物体 上 而 反射 到 人 眼 的 一 种 视觉 效应 。 日 常 所 见 到 的 白光 , 实际 上 是 由 红 、 绿 、 
蓝 三 种 波长 的 光 组 成 ， 物 体 经 光源 照射 ， 吸 收 和 反射 不 同 波长 的 红 、 绿 、 蓝 光 ， 经 由 人 的 眼睛 ， 
传达 到 大 脑 形 成 了 我 们 所 看 到 的 各 种 颜色 ， 也 就 是 说 ， 物 体 的 颜色 就 是 它们 反射 的 光 的 颜色 ， 如 
图 1-4 所 示 。 


全 


莫 、_ 区 


到 1-4 


彩 作 为 视觉 信息 ， 无 时 无 刻 不 在 影响 着 人 类 的 正常 生活 。 美 妙 的 自然 色彩 ， 刺 激 着 人 们 的 视觉 ， 感 染 着 人 们 
感 ， 提 供给 人 们 丰富 的 感受 空间 。 


从 人 类 的 视觉 经 验 得 知 ， 既 然 光 是 色彩 存在 的 必 备 条 件 ， 那 么 就 应 当 了 解 色彩 产生 的 实际 理论 
过 程 : 光源 (直射 光 广 -一 物体 (反射 光 、 投 射 光 广 -一眼 (视神经 广 一 大 脑 (视觉 中 枢 广 一 产生 色 
感 反应 (知觉 )。 


光源 色 与 物体 色 


凡是 自身 能 够 发 光 的 物体 都 被 称 为 光源 。 光 源 可 以 分 为 两 种 ， 一 种 是 自然 光 ， 如 太阳 光 ; 另 一 
种 是 人 造 光 ， 如 灯光 、 烛 光 等 。 物 体 色 与 照射 物体 的 光源 的 颜色 和 物体 的 物理 特性 有 关 。 光 源 色 和 
物体 色 有 着 必然 的 联系 。 

不 同 的 光源 发 出 的 光 ， 由 于 光波 的 长 短 、 强 弱 、 光 源 性 质 的 不 同 ， 而 形成 了 不 同 的 色光 ， 被 称 
为 光源 色 。 同 一 物体 在 不 同 的 光源 下 会 呈现 不 同 的 色彩 ,例如 一 面 白 色 的 背景 墙 ， 在 红 光 的 照射 下 ， 
会 呈现 红色 ， 在 绿 光 的 照射 下 ， 会 呈现 绿色 ， 如 图 1-5 所 示 。 


图 1-5 
物体 色 是 指 物体 本 身 不 发 光 ， 而 是 通过 物体 吸收 反射 经 过 的 光源 色 后 反映 到 人 的 视觉 中 心 的 光 
色 感 觉 。 如 建筑 物 的 颜色 、 动 植物 的 颜色 等 。 
物体 可 以 分 为 不 透明 体 和 透明 体 两 类 ， 不 透明 体 所 呈现 的 色彩 是 由 它 反射 的 色光 决定 的 ， 而 透 
明 体 所 呈现 的 色彩 是 由 它 所 能 透 过 的 色光 决定 的 ， 如 图 1-6 所 示 。 
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， 透明 物体 的 颜色 是 由 它 透 过 ， 
”的 色光 决定 的 。 透 明 物 体 适 过 ， 
什么 色光 ， 它 就 是 什么 颜色 。 
， 有 色 透 明 物体 只 透 过 与 它 本 ， 
， 身 相同 颜色 的 光 ， 而 其 他 颜色 | 


1.2 大 色彩 的 传达 意义 p 

在 探究 色彩 的 科学 本 质 和 使 用 技巧 时 ， 我 们 发 现 人 的 感官 对 于 色彩 的 运用 有 着 很 重要 的 作用 ， 
不 同 的 色彩 往往 能 够 引发 强烈 的 心理 共鸣 ， 这 就 是 色彩 传达 的 意义 。 在 选择 一 种 颜色 时 ， 设 计 师 需 
要 考虑 这 种 颜色 是 否 能 够 引起 恰当 的 反应 。 


对 色彩 的 意义 有 了 最 基本 的 了 解 后 ， 就 可 以 非 ee 类 型 的 网 页 更 适合 哪些 颜色 ， 例 如 ， 红 色 不 适 
合 科学 严谨 的 网 页 ， 因 为 它 很 难 使 人 平静 下 来 ; 蓝 色 不 适合 食品 类 网 页 ， 因 为 它 会 抑制 食欲 


色彩 的 生理 反应 


不 同 的 色彩 能 够 引起 人 不 同 的 生理 反应 。 例 如 ， 红 色 非 常 艳丽 ， 会 使 人 感到 激动 、 活 力 十 足 ， 
如 图 1-7 所 示 ， 而 相反 的 ， 蓝 色 则 会 让 人 感到 沉静 舒适 ， 从 而 心态 平和 、 放 松 ， 如 图 1-8 所 示 。 


oorwin haour ure onox Ou 


a ee 

| 红色 是 最 能 代表 中 国 传统 文化 的 颜色 ， 在 众多 颜色 ，。 ， 蓝 色 有 着 天 空 和 海洋 的 广阔 感 , 让 人 觉得 无 比 舒适 ， 

， 中 ， 红 色 是 最 鲜艳 生动 、 最 热烈 的 颜色 ， 给 人 以 激 ，， 同 时 还 给 人 害 智 、 干 练 的 感觉 ， 大 面积 使 用 时 ， 会 | 

| 进 的 色彩 印象 ， 让 人 联想 到 火焰 与 激情 。 红 色 有 促 ， ， 给 人 沉稳 、 整 洁 的 印象 。 蓝 色 是 受众 度 最 高 的 颜色 ，， 

| 进食 欲 的 特性 ， 所 以 在 食品 广告 中 比较 常见 。 。 。; 。， 所 以 在 商业 中 被 广泛 应 用 。 | 
图 1-7 图 1-8 
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人 们 每 时 每 刻 都 在 被 不 同 颜 色 的 物体 所 包围 ， 群 体 生 活 习性 使 大 部 分 人 对 一 些 常 见 事物 的 颜色 
形成 了 相同 的 心理 感受 ， 这 就 奠定 了 科学 使 用 颜色 的 可 行 性 。 任 何 对 颜色 的 心理 联想 都 有 正 反 两 面 ， 
如 表 1-1 所 示 是 一 些 常见 色彩 的 象征 意义 。 


表 1-1 

_ 未 窜 告 或 禁 x， 5 S 
红色 | 热情、 张扬、 高 调 、 艳 丽 ， 侵 略 、 暴 力 、 血 腥 SC 警告 或 禁止 的 含义 ， 例 如 可 被 应 用 在 节日 庆祝 的 网 
黄色 | 温暖、 亲切 、 光 明 ， 疾 病 、 情 双 特别 适合 用 于 食品 或 儿童 类 网 页 ， 或 在 其 他 类 型 网 页 上 起 到 一 定 的 

警示 作用 
绿色 | 希望 、 生 机 、 成 长 、 环 保 ; 嫉妒 通常 表示 与 财政 有 关 的 事物 ， 常 被 应 用 在 医疗 和 教育 网 页 上 


蓝 色 | 沉静、 科学、 严谨; 冰凉、 保守 、 冷 漠 、 忧 郁 | 被 大 量 应 用 于 科技 类 网 页 ， 或 用 在 表达 情绪 的 艺术 网 页 上 

紫色 高 贵 、 浪 漫 、 华 丽 、 忠 诚 、 神 秘 、 稀 有 ， 整 间 、| 紫色 常用 来 表达 女性 产品 ， 而 很 多 科幻 片 和 灾难 片 都 喜欢 用 蓝 紫 色 
恺 怖 、 死 亡 来 泻 染 恐怖 的 情景 

白色 | 纯洁、 天真、 和平、 洁净 ; 冷淡、 贫乏 、 空 虚 | 白色 有 纯净 、 安 静 的 含义 ， 一 方面 又 代表 死亡 

黑色 稳重 、 高 端 、 精 致 、 现 代 感 ， 黑 暗 、 死 亡 、| 很 多 网 页 喜欢 使 用 黑色 表现 企业 的 高 端 和 产品 的 品质 感 ， 也 会 被 应 
政 恶 用 到 充满 神秘 感 的 网 页 中 

灰色 | 柔和 、 中 庸 、 调 和， 模糊 、 犹 豫 这 是 一 种 稳重 、 高 雅 的 色彩 ， 合 理 运用 会 显得 很 有 品位 


颜色 模式 和 网 页 安全 色 2 


颜色 模式 决定 了 色彩 的 分 类 和 应 用 范围 ， 例 如 RGB 模式 是 由 红 、 绿 、 蓝 三 种 颜色 组 成 ， 其 主要 
作用 是 在 计算 机 屏幕 上 显示 各 种 各 样 的 色彩 。 不 同 的 平台 (Mac、Windows 等 ) 有 不 同 的 调 色 板 ， 不 
同 的 浏览 器 也 有 自己 的 调 色 板 。 为 了 解决 Web 调 色 板 的 问题 ， 人 们 一 致 通过 了 一 组 在 所 有 浏览 器 中 
都 类 似 的 Web 安全 颜色 。 


色光 三 原色 © 


显示 器 的 所 有 颜色 都 是 通过 红色 (Red)、 绿 色 (Green) 和 蓝 色 (Blue) 三 原色 的 混合 来 显示 的 ,我 
们 将 显示 器 的 这 种 颜色 显示 方式 统称 为 RGB 色 系 或 RGB 颜色 空间 。 

显示 器 可 以 显示 出 多 达 1600 万 种 的 颜色 ( 当 显示 器 支持 24 位 真 彩色 以 上 时 )， 而 这 些 颜 色 都 是 
通过 三 原色 的 盈 加 来 实现 的 ， 所 以 这 种 颜色 的 混合 原理 被 称 为 加 法 混合 ， 1-9 所 示 。 


| 当 三 原色 的 能 量 都 处 于 | 
| 最 大 值 (纯色 ) 时 ， 混 | 


| 合 而 成 的 颜色 为 纯 白 ， : 人 
， 色 。 但 通过 适当 调整 三 了 > Be 蓝 色 二 红色 二 品 和 


| 原色 的 能 量 值 ， 能 够 得 ， 
| 到 其 他 色调 (亮度 与 对 | 
， 比 度 ) 的 颜色 。 | 


“23 印刷 二 原色 一 加 


本 书 中 所 讲 的 色彩 依据 都 是 来 自 色光 三 原色 ， 是 我 们 能 在 屏幕 上 看 到 的 颜色 ， 而 除 此 之 外 ， 还 
这， 


| 红色 十 绿色 十 蓝 色 = 白色 | 


有 一 种 印刷 三 原色 ， 如 图 1-10 所 示 。 


| 品 红 + 黄 色 = 红色 

< 黄色 + 青色 = 绿色 
| 青色 + 品 红 = 蓝 色 
| 品 红 + 黄 色 + 青色 = 黑色 | 


图 1-10 
印刷 三 原色 有 时 也 被 称 为 颜料 三 原色 或 美术 三 原色 ， 印 刷 的 颜色 实际 上 都 是 看 到 的 纸张 反射 的 
光线 ， 例 如 我 们 在 画 画 的 时 候 调 颜 色 ， 也 要 用 这 种 组 合 。 颜 料 是 吸收 光线 ， 不 是 光线 的 到 加 ， 因 此 
颜料 的 三 原色 就 是 能 够 吸收 RGB 的 颜色 一 一 青 、 品 红 、 黄 (CMY)， 它 们 就 是 RGB 的 补 色 。 


美术 二 原色 ”(@@ 


传统 美术 色彩 的 三 原色 是 红 、 黄 、 蓝 ， 红 、 黄 、 蓝 被 人 们 加 入 了 实际 感觉 ， 是 感受 上 的 三 原色 ， 
而 并 不 是 科学 上 的 三 原色 ， 也 是 多 数 人 从 小 学 绘画 时 老师 教 给 我 们 的 三 原色 。 


加 法 混合 和 减法 混合 


颜色 的 混合 将 提高 混合 后 颜色 的 亮度 ， 称 为 加 法 混合 。 例 如 在 混合 红色 (Red) 和 绿色 (Green) 时 
得 到 的 黄色 (Yellow)， 其 亮度 要 比 原色 一 一 红色 (Red) 和 绿色 (Green) 的 亮度 高 ， 在 混合 红色 (Red)、 
绿色 (Green) 和 蓝 色 (Blue) 三 种 颜色 时 ， 将 得 到 最 亮 的 颜色 一 一 白色 (White)。 

颜色 的 混合 将 降低 混合 后 颜色 的 亮度 ， 称 为 减法 混合 。 例 如 在 混合 品 红 (Magenta) 和 黄色 
(Yellow) 时 得 到 的 红色 (Red)， 其 亮度 要 比 原色 一 一 品 红 (Magenta) 和 黄色 (Yellow) 的 亮度 低 ; 在 混合 
品 红 (Magenta)、 黄 色 (Yellow) 和 青色 (Cyan) 时 ， 将 得 到 最 暗 的 颜色 一 一 黑色 (Black)。 


HSB 模式 中 的 H、S、B 分 别 表示 色相 
(Hue)、 纯 度 (Saturation) 和 明度 (Brightness)， 这 
正 是 色彩 的 三 属性 ， 这 是 一 种 从 视觉 角度 定义 颜 
色 的 色彩 模式 。 用 户 可 以 在 Photoshop 中 使 用 
HSB 模式 拾取 颜色 ， 但 无 法 以 HSB 模式 创建 和 
编辑 图 像 。 

色相 H: 在 0? ~360" 的 标准 色 轮 上 ， 色 相 
是 按 位 置 度量 的 ， 如 红色 的 色相 为 0” ， 绿 色 的 
色相 为 120” ， 蓝 色 的 色相 为 240” ， 如 图 1-11 
所 示 。 


360°/0° 


纯度 S: 表示 色相 中 彩色 成 分 所 占 的 比例 ， 
通常 用 0( 灰色 )~100( 完全 饱和 ) 的 百分比 来 


度量 。 


通过 三 原色 又 加 得 到 除 和 白色 以 外 的 其 他 6 种 颜 | 
| 色 , 然后 再 取 中 间 过 渡 色 , 可 以 得 到 12 色 的 色 环 。 | 
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明度 B: 是 指 颜色 的 明暗 程度 ， 通 常用 0( 黑 )~100%( 白 ) 的 百分比 来 度量 ， 如 图 1-12 所 示 。 


90% 黑 图 ?0x 果 国 ?0* 黑 
80% 黑 图 :0ox 呆 图 so0x 呆 
70% 黑 70% 黑 70% 黑 
60% 黑 国 60% 黑 国 60% 困 
50% 黑 国 50% 黑 国 50% 黑 
40% 黑 轩 40x 呆 图 40% 呆 
30% 黑 于 30% 黑 国 30x 黑 
20% 黑 国 20% 黑 国 20% 黑 
混合 80% 白 10% 黑 了 810% 黑 国 10x 黑 
混合 60% 白 国 ? a 由 
混合 40% 白 10% 白 10% 白 10% 白 
混合 20% 白 20% 白 ， 20% 白 国 20% 白 
无 黑白 添加 30% 白 ， 30% 白 团 30% 白 
混合 20% 黑 40% 白 40% 白 40% 白 
混合 40% 黑 50% 白 ”50% 白 天 50% 白 
混合 60% 黑 60% 白 60% 白 60% 白 
混合 80% 黑 70% 白 “70% 白 国 70% 白 
80% 白 80% 白 80% 白 
90% 白 90% 白 ”90% 白 


图 1-12 


有 Hex 和 网 页 安全 色 3 


网 页 中 颜色 的 具体 显示 效果 会 根据 用 户 屏 幕 的 不 同 而 略 有 差异 ， 所 以 即使 为 自己 的 网 页 选用 最 
完善 的 配色 方案 ， 也 很 难 控制 页 面 在 每 个 浏览 者 屏幕 上 的 具体 显示 效果 。 为 了 解决 不 同 显示 器 的 颜 
色 显 示 效 果 不 统 一 的 问题 ， 人 们 定义 了 一 组 在 所 有 浏览 器 中 都 类 似 的 Web 安全 颜色 。 

Web 安全 色 使 用 十 六 进 制 值 00、33、66、99、CC 和 FF 来 表达 三 原色 中 的 每 一 种 。 可 能 的 输 
出 结果 包括 6 种 红色 调 、6 种 绿色 调和 6 种 蓝 色调 ，6x6x6=216， 这 216 种 颜色 就 是 网 页 安全 色 。 


这 些 颜色 可 以 被 放心 地 应 用 于 网 页 ， 而 不 必 担心 颜色 在 显示 器 上 的 显示 差异 。 读 者 可 以 通过 互联 网 
查看 Web 安全 色 的 具体 参数 ， 如 图 1-13 所 示 。 


pWEBSAFECOLORS 


216WE8 安 全 色 


图 1-13 


WEB 安 全 色 


37 Ed 8 


Lab 模式 是 由 国际 照明 委员 会 (CIE) 于 1976 年 公布 的 一 种 色彩 模式 ， 是 CIE 组 织 确定 的 一 
论 上 包括 人 眼 可 见 的 所 有 色彩 的 色彩 模式 ， 这 种 颜色 混合 后 将 产生 具有 明亮 效果 的 色彩 ，Lab 模式 的 
组 成 关系 如 图 1-14 所 示 。 


[a 


sR 


图 1-14 


Lab 模 式 弥补 了 RGB 与 CMYK 两 种 色彩 模式 的 不 足 , 如 果 使 用 Photoshop 来 进行 设计 ,可 以 用 来 做 色彩 转换 5 
例如 一 幅 RGB 模式 的 图 像 ， 可 以 先 将 其 转换 成 Lab 模式 ， 然 后 再 将 其 转换 成 CMYK 模式 ， 这 样 可 以 保证 在 进行 色彩 
模式 转换 时 CMYK 范围 内 的 色彩 没有 损失 


Lab 颜色 模型 由 三 个 要 素 组 成 ， 一 个 要 素 是 亮度 (L)， 如 图 1-15 所 示 。 调 整 上 的 值 ， 可 以 调整 
像 亮 度 的 明暗 。 


到 


图 1-15 
a 和 b 是 两 个 颜色 通道 。a 包括 的 颜色 是 从 深 绿色 ( 低 亮 度 值 ) 到 灰色 ( 中 亮度 值 ) 再 到 亮 粉红 色 
(高 亮度 值 )， 调 整 a 的 值得 到 的 效果 如 图 1-16 所 示 。 


图 1-16 


b 是 从 亮 蓝 色 ( 低 亮度 值 ) 到 灰色 ( 中 亮度 值 ) 再 到 黄色 ( 高 亮度 值 )， 调 整 b 的 值得 到 的 效果 如 
凤 1-17 所 示 。 


) 
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图 1-17 


常用 色彩 的 名 称 和 分 类 


三 间 色 是 三 原色 当中 任何 的 两 种 原色 以 同等 
比例 混合 调和 而 形成 的 颜色 ， 也 叫 第 二 次 色 ， 和 
三 原色 形成 对 比 色 、 互 补 色 。 例 如 ， 品 红色 加 黄 
色 就 是 红色 ， 品 红色 加 青色 就 是 蓝 色 ， 黄 色 加 青 
色 就 是 绿色 ， 如 图 1-18 所 示 。 

值得 注意 的 是 ， 印 刷 三 原色 ( 青 、 品 红 、 黄 ) 
的 三 间 色 正好 是 光 的 三 原色 ( 红 、 绿 、 蓝 )， 而 光 
的 三 原色 的 三 间 色 正好 是 印刷 三 原色 。 美 术 三 原 


色 ( 红 、 黄 、 蓝 ) 的 三 间 色 是 梭 、 绿 、 紫 。 ， 蓝 箭头 所 指 的 红色 、 绿 色 和 蓝 色 为 光 的 三 ， 

， 原 色 ， 红 箭头 所 指 的 品 红 、 黄 和 青 为 印刷 | 

= 原色 
将 两 个 间 色 ( 如 橙 与 绿 、 绿 与 紫 ) 或 一 个 原色 四 lS 


与 相对 应 的 间 色 ( 如 红 与 绿 、 黄 与 紫 ) 相 混合 得 出 的 色彩 。 复 色 包含 三 原色 的 成 分 ， 成 为 色彩 纯度 较 
低 的 含 灰 色彩 ， 称 为 复 色 ， 如 图 1-19 所 示 。 


加 加 | 


RGB(255,0,0) RGB(255,255,0) 


RGB(0,255,0) 


RGB(0,0,255) 


RGB(255,255,128) 


RGB(128,255,255) 


RGB(255,128,255) 
图 1-19 


RGB(128,128,255) 


RGB(0,255,255) 同上 128,128) 


复 
会 
色 


RGB(255,0,255) Ed 255,128) 


EE -te 


色相 环 中 与 基础 颜色 相隔 120” 的 任何 三 种 颜色 ， 都 可 以 被 叫 作对 比 色 ， 如 图 1-20 所 示 。 


， 色相 环 中 箭头 所 指 的 三 种 颜色 为 对 ， 
， 比 色 ， 严 格 意义 上 在 色相 环 上 每 种 ， 
， 颜色 都 至 少 有 两 种 绝对 的 对 比 色 ， 

， 而 笼统 地 讲 ， 对 于 每 种 颜色 而 言 ， 

， 在 色相 环 上 相距 120” 到 180” 的 颜 ， 
， 色 都 是 对 比 色 的 关系 ， 对 比 色 的 视 ， 
， 觉 刺激 程度 仅 次 于 互补 色 ， 与 互补 ， 
| 色相 比 稍 显明 快感 


同一 色相 中 不 同 倾向 的 系列 颜色 被 称 为 同类 色 。 如 红色 可 分 为 玫瑰 红 、 朱 红 、 酒 红 、 宝 石 红 等 ， 
都 称 为 同类 色 ， 这 些 颜色 也 可 以 被 统称 为 红色 系 ， 如 图 1-21 所 示 。 


个 FE 
ma Em 
加 本 本 天 和。 加 是。 例如， 红色 和 栓 色 之 问 的 过 | 
[未 流 ， 合 红色 较 多 的 颜色 月 纳 于 ， 
， 红色 系 ， 含 橙色 较 多 的 颜色 ， 
一 一 : -一 一 < 归纳 于 橙色 系 。 红 色 和 紫色 ， 
EE 有 | 站， 之 问 ， 如 果 合 红 名 成 分 较 多 ， 
生 敌 。， 则 归纳 于 红色 系 ; 如 果 含 紫色 | 
ER 未 成 分 较 多 ， 则 归纳 于 紫色 系 。 
一 一 一 全 
[| y | 
图 1-21 


邻近 色 之 间 往 往 是 你 中 有 我 ， 我 中 有 你 。 以 朱红 与 紫 芯 色 为 例 ， 朱 红 以 红 为 主 ， 里 面 带 有 
少量 的 紫色 ， 而 紫 蕨 色 以 紫色 为 主 ， 里 面 带 有 少许 的 红色 。 在 12 色相 环 中 ， 凡 是 夹 角 在 60” 范围 
之 内 的 颜色 属于 邻近 关系 ， 可 以 称 为 邻近 色 ， 邻 近 色 在 色相 对 比 上 适中 ， 不 会 令 人 感觉 很 强烈 ， 如 
图 1-22 所 示 。 


EY 0: 


， 以 12 色相 环 为 例 ， | 
| 紫红 色 与 橙色 之 间 ， 
| 的 颜色 为 邻近 色 ， 区 
， 还 有 紫红 色 与 红色 ，， 
， 红色 与 栓 色 。 
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重油 互补 色 2 


在 光学 中 ， 当 两 种 色光 以 适当 的 比例 混合 而 能 够 产生 白光 时 ， 则 这 两 种 颜色 就 互 为 补 色 。 当 互 
补 色 并 列 时 , 会 引起 强烈 对 比 的 色觉 ,会 感到 红 的 更 红 、 绿 的 更 绿 。 在 色相 环 上 可 以 轻松 找到 互补 色 ， 
两 者 相距 180” ， 即 在 对 面 的 位 置 ， 如 图 1-23 所 示 。 


在 色相 环 上 ， 每 种 颜色 对 面 
的 颜色 即 为 互补 色 ， 互 补 色 | 
所 同时 出 现 的 时 候 ， 会 给 入 以 | 
， 非常 醒目 、 鲜 明 、 刺 激 的 视 ， 
， 觉 感受 ， 个 性 最 为 张扬 。 


高 明度 的 橙色 通常 都 会 给 人 一 种 温暖 、 新 鲜 的 感觉 ， 而 通过 将 黄色 、 浅 蓝 色 等 
颜色 作为 点 级 色 ， 通 常 都 能 够 得 到 非常 好 的 效果 。 

橙色 是 可 以 通过 变换 色调 营造 出 不 同 氛围 的 典型 颜色 ， 它 既 能 够 表现 出 青春 的 
活力 ， 也 能 够 实现 沉稳 老练 的 效果 。 高 明度 的 橙色 经 常用 来 表现 青春 、 时 尚 风格 或 
食品 类 网 页 ; 而 中 等 色调 的 橙色 常用 来 表现 房地产 行业 或 充满 自然 气息 的 一 些 网 页 。 


| 


} 橙色 食物 是 国际 公认 的 健康 代表 , 给 
| 不 仅 看 起 来 很 醒目 ， 更 能 增进 食欲 ， 还 能 调节 人 的 


回 设计 分 析 

@ 纯色 背景 中 添加 暗 纹 和 渐变 ， 增 加 了 质感 和 层次 感 ， 提 高 了 品质 和 档次 。 拟 物化 的 图 标 显得 
更 加 活泼 、 生 动 且 引 人 注意 。 

@ 使 用 彩色 水 墨 插画 作为 背景 的 一 部 分 ， 增 加 了 一 些 传统 气息 ， 很 好 地 诠释 了 该 产品 所 富 含 的 
特色 ， 并 添加 了 一 些 文化 气息 。 

人 使 用 高 饱和 度 的 橙色 作为 页 面 背景 的 主 色 ， 给 人 温暖 、 新 鲜 的 感觉 ， 促 进食 欲 。 搭 配 明亮 的 
黄色 作为 点 级 ， 为 页 面 增添 活力 。 使 用 淡 蓝 色 作为 点 级 ， 略 微 降低 暖 色调 的 燥热 ， 给 人 清新 自然 的 


感觉 。 
日 ”绘制 步骤 
| 第 1 步 :确认 网 页 主 色 ， 创 建 整 体 布局 。 
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、 延 人 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


BASA Fo 


ew 


ew 


he 


,Enjoy The Food Life'” 
ennsant an ea 


| 人 Enjoy The Food Lfe! 上 


! 配色 评价 : | 
| GD 绿色 应 用 在 食品 类 网 页 上 给 人 以 优质 、 安 全 和 无 污染 的 ;中 蓝 色 给 人 一 种 自然 、 清 爽 、 清 澈 的 印象 ， 但 是 作为 背景 
感觉。 颜色 与 产品 措 配 并 不 协调 ， 应 用 于 食品 行业 中 的 热 食 
| @ 搭配 明之 的 黄色 作为 点 级 ， 增 加 了 温暖 的 感觉 和 活路 的; ”或 热饮 ， 会 过 于 压制 热量 ， 令 人 党 得 没有 食欲 
| 气氛 人 @ 过 亮 的 蓝 色 与 白字 的 文字 搭配 在 一 起 有 一 种 模糊 、 混 乱 
| @ 使 用 淡 蓝 色 作为 点 级 ,与 绿色 呼应 ,在 页 面 中 搭配 白云 ， ”的 感觉 ， 不 够 清晰 明了 ， 整 个 页 面 生硬 不 自然。 

给 人 青春 的 活力 感 。 


应 用 于 房地产 网 页 : | 应 用 于 儿童 类 网 页 : | 
| @ 高 他 和 度 的 橙色 给 人 以 阳光 的 印象 ， 令 人 充满 活力 ， 使 ;GD 亮丽 的 太阳 橙 与 正 橙色 相 比 更 加 明净 单纯 ,给 和 以 健康 、 


! ”用 高 饱和 度 的 红色 作为 点 缀 色 ， 更 显 热情 洋溢 。 ! 活泼 的 印象 。 ! 

| 加 使 用 灰色 和 白色 作为 辅 色 ， 给 人 以 空间 感 , 且 显 得 高 档 、; @ 使 用 白色 作为 辅 色 ， 能 够 制造 出 明快 的 气氛 ， 给 人 以 愉 | 

大 气 。 ; ” 快 的 感觉 使 用 绿色 和 蓝 绿 色 点 级 ， 添 加 了 健康 和 活 ， 
1 跃 感 。 


要 理解 和 运用 色彩 , 必须 掌握 进行 色彩 归纳 整理 的 原则 和 方法 , 其 中 最 主要 的 是 掌握 色彩 的 属性 。 
世界 上 的 色彩 千差万别 ， 每 一 种 色彩 都 会 同时 具备 三 个 基本 属性 : 色相 、 明 度 和 纯度 。 它 们 在 色彩 
学 上 称 为 色彩 的 三 大 要 素 或 色彩 的 三 属性 。 颜 色 可 以 分 为 无 彩色 和 有 彩色 两 大 类 。 


[Ey 


第 1 章 色彩 基础 知识 


色相 © 


色相 是 指 色彩 的 相貌 ， 是 区 分 色彩 种 类 的 名 称 。 在 可 见 光 谱 中 ， 红 、 柑 、 黄 、 绿 、 蓝 、 紫 每 一 
种 色相 都 有 自己 的 波长 与 频率 ， 它 们 从 短 到 长 按 顺序 排列 ， 光 谱 中 的 色相 发 射出 色彩 的 原始 光 ， 它 
们 构成 了 色彩 体系 中 的 基本 色相 ， 如 图 1-24 所 示 。 


Am + “ 
ON 


12 色相 的 色调 变化 ， 在 光谱 色 感 上 是 均匀 的 ， 如 图 1-25 所 示 。 如 果 进 一 步 找 出 其 中 间 色 ， 便 
可 以 得 到 24 色相 ， 如 图 1-26 所 示 。 基 本 色相 间 取 中 间 色 ， 即 得 到 12 色相 环 ， 再 进一步 便 可 得 到 
24 色相 环 。 在 色相 环 的 圆圈 里 ， 各 色相 按 不 同色 度 排列 ，12 色相 环 每 一 色相 间距 30” ，24 色相 环 
每 一 色相 间距 为 15" 。 


#ff0000 


。 255 270” 285 


此 
CO 
bx 00# ‘Su 
人 全 人 机 和 
| ! ， 在 可 见 光谱 中 ， 红 、 楼 、 黄 、 绿 、 青 、 蓝 、 紫 构 ， 
| 以 按照 : 红 、 橙 、 | ! | 
eA ee | 成 了 色彩 体系 中 的 基本 色相 ， 基 本 色相 之 间 的 过 ， 
er pp eer ey ， 渡 色 再 被 衍生 出 来 ， 构 成 了 12 色相 环 。12 色 环 ， 
| ” ! ， 取 中 间 色 ， 再 进一步 可 以 得 到 24 相 色 环 。 | 
| 图 I25 lg 


在 色相 环 上 相对 的 颜色 搭配 称 为 对 比 色 配 色 ， 例 如 红色 与 绿色 的 对 比 ; 相互 靠近 的 颜色 搭配 称 
为 邻近 色 配色 ,例如 红色 与 杰 色 的 配色 ， 相 同色 相 不 同 纯 度 和 明度 的 颜色 搭配 称 为 同色 系 配色 ,， 例 
如 红色 与 粉红 色 或 深 红色 的 配色 。 


< 


OR re SS 
-一 一 明度 > 


明度 是 眼睛 对 光源 和 物体 表面 的 明暗 程度 的 感觉 ， 主 要 是 由 光线 强 弱 决 定 的 一 种 视觉 经 
验 。 色 彩 的 明亮 程度 就 是 常 说 的 明度 。 明 亮 的 颜色 明度 高 ,暗淡 的 颜色 明度 低 。 明 度 最 高 的 颜色 是 白色 ， 
明度 最 低 的 颜色 是 黑色 ， 如 图 1-27 所 示 。 


| 同一 个 色相 ， 因 为 ， 
| 光源 的 照射 导致 的 | 
有 < 明 陪 不同 会 有 亮丽 | 
, 与 暗 沉 的 差别 ， 越 | 
， 亮 越 接 近 白 色 , 越 | 
| 暗 越 接近 黑色 


Ss/\e 


图 1-27 


同样 的 纯色 根据 色相 的 不 同 ， 明 度 也 不 尽 相同 。 例 如 ， 黄 色 明度 很 高 ， 接 近 白色 ， 而 紫色 的 明 
度 很 低 ， 接 近 黑 色 。 


明度 不 仅 取决 于 物体 的 照明 程度 ， 而 且 取 决 于 物体 表面 的 反射 系数 。 如 果 我 们 看 到 的 光线 来 源 于 光源 ， 那 么 明 
度 取 决 于 光源 的 强度 。 如 果 我 们 看 到 的 是 来 源 于 物体 表面 反射 的 光线 ， 那 么 明度 取决 于 照明 光源 的 强度 和 物体 表面 
的 反射 系数 


在 同一 色相 、 同 一 纯度 的 颜色 中 , 混入 黑色 越 多 ,明度 越 低 ; 相反 , 混入 白色 越 多 ,明度 越 高 。 
利用 明度 对 比 ， 可 以 充分 表现 色彩 的 层次 感 、 立 体感 和 空间 关系 ， 如 图 1-28 和 图 1-29 所 示 为 
同样 色相 的 明暗 不 同 的 对 比 。 据 色彩 专家 研究 的 结果 表明 ， 色 彩 的 明度 对 比 的 力量 要 比 纯度 对 比 
大 3 倍 。 


Picture 


咖啡色 与 墨绿 色 搭 配 ， 同 一 色相 ， 光 线 越 强 ，， ;咖啡色 与 墨绿 色 搭配 ， 同 一 色相 ， 光 线 越 暗 ， | 
， 白 色 越 多 ， 颜 色 感觉 就 越 淡 ， 大 面积 使 用 时 ，， ， 黑色 越 多 ， 颜 色 感觉 就 越 深 ， 大 面积 使 用 时 ， 
， 能 够 衬托 搭配 色 的 厚重 感 。 | ， 能 够 使 搭配 色 更 加 引 人 注 目 。 | 
1 图 I28 站 


7 第 1 齐 色彩 其 UniR 
二 纯度 (饱和 度 ) ”全 


纯度 也 称 为 饱和 度 ， 是 指 色彩 的 鲜艳 程度 ， 表 示 色 彩 中 所 含 色彩 成 分 的 比例 。 色 彩 成 分 的 比例 
越 大 ， 则 色彩 的 纯度 越 高 ， 色 彩 成 分 的 比例 越 小 ， 则 色彩 的 纯度 越 低 。 从 科学 的 角度 看 ， 一 种 颜色 
的 鲜艳 度 取决 于 这 一 色相 发 射 光 的 单一 程度 。 不 同 的 色相 不 仅 明度 不 同 ， 纯 度 也 不 相同 ， 如 图 1-30 


所 示 。 
人 


Ab 


任何 一 种 鲜明 的 颜色 ， 只 要 它 的 纯度 稍稍 降低 ， 就 会 引起 色相 性 质 的 偏离 ， 而 改变 原 有 的 风格 ， 
例如 黄色 是 视觉 度 最 高 的 色彩 ， 只 要 稍稍 加 入 一 点 灰色 ,立即 就 会 失去 兆 眼 的 光辉 ， 如 图 1-31 和 
1-32 所 示 。 


， 同 为 蓝 色 ， 因 为 纯度 和 明 ， 
， 度 的 不 同 ， 形 成 不 同 的 色 ， 
-< 相 ， 不 同 的 色彩 成 分 和 比 | 

， 例 构成 的 图 像 ， 因 为 明暗 ， 
| 的 不 同 也 可 以 成 为 漂亮 的 | 
， 图像， 令 人 感到 舒适 。 


图 1-30 


Seolor wae 


| 当 为 视觉 度 高 的 色彩 加 入 灰色 ， 降 低 颜色 的 纯 | 
， 度 ， 颜 色 就 会 变 淡 ， 失 去 引 人 注 目的 特色 。 


色调 是 指 以 一 种 主 色 和 其 他 色 的 组 合 、 搭 配 所 形成 的 页 面色 彩 关系 ， 即 色彩 总 的 倾向 性 ， 是 多 
样 与 统一 的 具体 体现 ， 通 常 可 以 从 色相 、 明 度 、 冷 暖 、 纯 度 4 个 方面 来 定义 一 幅 作品 的 色彩 ， 一 般 
在 页 面 上 所 占 面 积 最 大 的 色相 从 视觉 上 便 成 了 主要 色调 。 

色调 具有 共性 ， 有 的 是 以 明度 的 一 致 性 组 成 明 调 或 暗 调 ， 有 的 是 以 纯度 的 一 致 性 组 成 鲜艳 色调 
或 含 灰色 调 。 如 图 1-33 和 图 1-34 所 示 为 明 调和 暗 调 的 网 页 页 面 。 


< 


OR or 


. 司 coowse wn 


3 
ADSENSE 他- 村 上 下 1 
， 自 色 和 浅 灰 是 整个 网 页 的 主 调 ， 整 体 给 人 以 ， 障 调 拱 配 鲜艳 的 色彩 ， 会 给 人 以 奢华 、 高 雅 
明净、 大 方 的 感觉 ， 很 好 地 诠释 了 明 色 调 所 ，。。 ， 的 感觉 ， 有 时 还 会 呈现 出 神秘 感 ， 能 够 吸引 | 
| 给 人 的 感受 。 人 的 眼球 . | 
J 图 133 图 1-34 


1. 锐 色调 
锐 色调 不 掺 杂 任何 无 彩色 ( 白色 、 黑 色 和 灰色 )， 是 最 纯粹 最 鲜艳 的 色调 ， 效 果 浓 艳 、 强 烈 ， 常 
用 于 表现 华美 、 艳 丽 、 生 动 、 活 跃 的 效果 ， 如 图 1_35 所 示 。 


ZE 


明 色 调 是 指 表现 思想 感情 所 使 用 的 明快 的 色彩 。 加 入 大 量 淡色 , 如 白色 或 灰色 , 呈现 明快 的 色彩 ， 
如 图 1-36 所 示 。 


Seolor mum Err 


< Good Dos Low Prce 


ee 


人 
| 该 网 页 中 的 黄色 、 绿色 和 蓝 色 都 是 高 纯度 的 色彩 ，} 。”“， 该 网 页 中 以 黑 、 白 、 灰 作为 页 面 的 主要 构成 元 素 ，， 
| 同 为 蓝 色 系 的 蔚蓝 色 和 宝石 蓝 起 到 调和 的 作用 ， } ”， 是 阴 色调 的 主要 代表 ， 明 色调 通常 是 表现 思想 感 | 
| 使 其 与 黄色 和 绿色 的 搭配 既 活跃 、 生 动 ， 又 不 会 ， ”“， 情 所 使 用 的 阴 色 ， 极 具 内 涵 ， 给 人 以 明快 、 雅 致 | 
， 显 得 生硬 、 凌 乱 ， 给 人 以 绚丽 多 姿 的 感觉。 ， “的 感受 ， 当 深 灰 和 黑色 占 比 较 大 时 富 有 张力 。 

图 1-35 | 图 1-36 


ZE 


浓 色 调 明度 较 低 ， 色 彩 中 虽 略 含 黑色 成 分 ， 但 仍 保持 一 定 的 浓艳 度 ， 俗 称 “ 深 色调 ”， 例 如 该 
网 页 中 使 用 的 咖啡 色 等 ， 如 图 1-37 所 示 。 


ZE 


以 明度 很 高 的 淡雅 色彩 组 成 柔和 、 优 雅 的 淡色 调 , 含有 较 多 白色 ， 所 以 亮度 很 高 ,传达 出 柔和 、 


[&ry 


舒适 的 效果 ， 如 图 1-38 所 示 。 


| 该 网 页 的 主 色 为 深 咖 啡 色 ， 明 度 较 低 ， 加 入 ， “该 网 页 中 主要 由 自 色 和 浅 灰 色 构成 了 亮度 很 | 
| 了 一 些 黑色 的 成 分 ， 整 体 为 深 色调 ， 给 人 以 。 “高 的 淡雅 色彩 ， 作 为 点 级 色 的 品 红色 显得 万 
， 跨 实 、 稳 重 和 沉着 的 感觉， 常常 创造 出 厚 。。 为 突出 ， 肥 传达 出 邓 和 、 优 下 的 感觉， 又 带 | 
| 重 的 古典 氛围 | “有 一 些 时 尚 气息 和 浪漫 的 感觉 | 
一 | 图 137 RE 


弱 色 调 指明 度 低 于 浅 灰 灰 调 且 含 灰色 调 ， 略 带 朴实 而 成 熟 的 气质 。 大 面积 用 弱 色 调 ， 小 面积 用 鲜 
艳 色调 作为 点 缀 ， 可 以 发 挥 稳重 的 特点 ， 而 避免 聊 暗 之 感 ， 如 图 1-39 所 示 。 


6. 陪 色调 
暗色 调 明度 和 纯度 都 比较 低 ， 色 暗 近 黑 ， 是 男性 化 的 色彩 。 例 如 ， 在 这 种 色调 中 适当 搭配 一 点 
深沉 的 浓艳 色 ， 可 得 到 华贵 的 效果 ， 如 图 1-40 所 示 。 


该 网 页 中 的 紫色 加 入 了 大 量 的 灰色 和 一 些 黑 ， 该 网 页 主要 使 用 深 灰 色 和 黑色 作为 背景 明 | 
， 色 ， 显 得 沉静 而 深远 ， 而 局 部 加 入 了 白色 的 ， ， 度 和 纯度 都 比较 低 ， 施 以 白色 和 浅 灰 色 的 光 ， 
| 光 晕 ,呈现 出 些许 的 亮 紫色 和 小 面积 的 蓝 色 、， ， 晕 感 ， 搭配 些许 黄土 色 和 使 用 橘 色 作为 点 组 ， 

,绿色 以 及 粉色 的 点 级 ， 避 免 了 降 暗 之 感 。 ， 得 到 华贵 的 效果 。 

> 图 139 0 


淡 弱 色调 是 在 比较 淡 的 颜色 中 加 入 明度 较 高 的 灰色 形成 的 色调 , 也 可 称 为 浅 灰 色调 , 表现 优美 、 
素 净 的 感觉 ， 这 类 颜色 很 适合 表现 高 品位 、 高 趣味 性 ， 如 图 1-41 所 示 。 


IE 


涩 色调 是 在 纯色 中 加 入 黑色 与 素雅 的 灰 灰色 形成 的 色调 ， 是 中 等 明度 、 中 等 纯度 的 色彩 组 合 ， 有 
二 
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沉着 、 深 厚 、 稳 重 之 感 ， 如 图 1-42 所 示 。 


， 该 网 页 中 大 面积 使 用 明度 较 高 的 灰色 作为 主 色 ，; “该 网 页 以 天 空 蓝 的 明暗 过 渡 、 深 灰色 以 及 黑色 | 
| 整体 表现 了 素 净 的 感觉 。 高 纯度 的 红色 和 绿色 ， “作为 主 色 和 辅 色 ， 形 成 中 等 明度 和 纯度 的 色彩 ， 
| 的 点 缀 增加 了 一 些 鲜 活 的 成 分 ， 增 加 一 些 趣味 ， 组合， 体现 出 了 沉着 、 深 厚 、 稳 重 之 感 ， 并 富 | 
| 性 ， 整 体 给 人 高 品位 、 高 格调 的 感受 。 | “有 一 些 科技 感 


色调 上 的 高 、 中 、 低 调 


高 、 中 、 低 调 主要 指 色调 中 颜色 的 明度 和 亮度 的 对 比 。 在 对 一 幅 画 的 色调 进行 构思 设计 时 ， 同 
样 是 绿色 调 可 以 有 高 调和 低调 之 分 ， 同 样 是 冷色 调 或 暖色 调 也 可 以 有 高 调和 低调 的 区 别 。 

高 调 画面 的 色彩 亮度 高 ， 色 彩 之 间 的 明度 对 比 弱 ( 明暗 反差 小 )， 页 面 特点 是 清淡 、 高 雅 、 明 快 。 
而 低调 画面 在 色彩 上 用 色 浓 重 、 浑 厚 、 亮 度 低 ， 色 彩 的 明暗 对 比 强烈 ， 页 面 特点 深沉 、 富 于 变化 。 
色彩 明暗 对 比 的 不 同 能 够 创造 出 丰富 的 色调 变化 ， 如 图 1-43 至 图 1-45 所 示 。 


高 调 是 由 白 到 浅 灰 的 成 分 对 图 像 造成 的 影响 ， 当 页 面 中 ， ， 低调 页 面 以 深 灰 至 黑 的 影 调 层次 占 了 页 面 的 绝 大 | 
的 大 部 分 加 入 了 这 些 成 分 ， 即 可 认定 其 为 高 调 。 高 调 的 ， ， 部 分 ， 少 量 的 白色 起 着 影 调 反差 作用 。 低 调 作品 ， 
页 面 给 人 以 明朗 、 纯 洁 、 轻 快 的 感觉 ， 但 随 着 主题 内 容 ， | 形成 凝重 、 庄严 和 刚 裔 的 感觉 ， 但 在 另 一 和 
和 环境 的 变化 ， 也 会 产生 惨淡 、 空 虚 、 翡 哀 的 感觉 。 | |! 下 ， 它 又 会 给 人 以 黑暗 、 阴 森 、 恺 惧 之 感 。 


， 申 间 调处 于 高 调和 低调 之 间 ， 反 差 小 ， 层 次 丰富 。 ， 
， 中 间 调 页 面 可 分 为 两 类 ， 一 类 强调 反差 ， 页 面 上 以 ， 
< 黑白 为 主 ， 去 掉 灰 色 的 表现 ， 给 人 以 强烈 的 视觉 印 | 
， 象 ; 另 一 类 对 黑 、 白 、 灰 各 影 调 层次 都 能 很 好 地 反 ， 
， 映 ， 给 人 的 印象 是 层次 丰富 ， 质 感 细腻 。 | 


无 彩色 和 有 彩色 

色彩 可 分 为 无 彩色 和 有 彩色 两 大 类 。 无 彩色 包括 黑 、 白 和 灰色 ， 有 彩色 包括 红 、 黄 、 蓝 等 除 黑 、 

白 和 灰色 以 外 的 任何 色彩 。 有 彩色 就 是 具备 光谱 上 的 某 种 或 某 些 色 相 ， 统 称 为 彩 调 。 相 反 ， 无 彩色 
就 没有 任何 彩 调 。 

使 用 有 彩色 搭配 的 网 页 , 可 以 表现 出 不 同 的 色彩 印象 和 效果 , 如 图 1-46 所 示 。 无 彩色 不 具备 “ 色 

相 ” 和 “纯度 ”属性 ， 所 以 很 难 判断 它们 到 底 属于 冷色 还 是 暖色 ， 如 图 1-47 所 示 。 


an ae es wy 
“~ 


92 


En a te 
下 ， 该 网 页 中 全 部 使 用 黑白 灰 的 无 彩色 构成 , 不 | 
| 用时， 它们 可 以 很 好 地 突出 色彩 效果 ， 在 该 ， | : 
l. | ， 推 杂 任何 其 他 色彩 ， 充 分 突出 主题 ， 给 人 以 ， 
网 页 中 通过 搭配 使 用 高 亮度 的 彩色 和 白色 、 ee 
| 亮 灰色 ， 得 到 了 了 明亮、 轻快 的 效果 。 | ! 

本 图 146 7 


事实 上 ， 当 无 彩色 与 暖色 搭配 在 一 起 时 同样 会 显得 温暖 、 柔 和 ， 当 它们 与 冷色 搭配 在 一 起 时 ， 
会 显得 严谨 、 理 智 。 因此 人 们 将 黑 、 白 、 灰 归 类 为 中 性 色 , 并 使 用 它们 来 调和 过 于 跳跃 和 对 立 的 颜色 ， 
从 而 使 配色 更 协调 ， 如 图 1-48 和 图 1-49 所 示 。 


,该 网 页 主要 由 黑 自 灰 这 几 种 无 彩色 构成 ， 当 拱 ， 该 网 页 的 无 彩色 中 加 入 部 分 蓝 色 时 ， 整 体 上 | 
| 配 了 一 些 红色 后 ， 整 体 进发 着 热情 、 勇 敢 和 前 ”有 理智 、 冷 静 、 严 谨 的 印象 ， 让 人 觉得 心性 | 
| 进 感 ， 同 时 又 不 会 令 人 觉得 过 于 激进 。 | | 平和 。 


单 色 印象 空间 D 


大 家 看 到 红色 的 时 候 有 什么 感觉 ? 看 到 蓝 色 的 时 候 有 什么 感觉 呢 ? 而 看 到 黄色 和 绿色 的 时 候 感 
觉 又 是 如 何 呢 ? 
当然 每 一 种 颜色 给 人 们 的 感觉 都 会 有 所 不 同 ， 但 要 具体 说 明 有 何不 同 却 是 一 件 困难 的 事情 。 如 
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果 有 一 个 能 够 合理 客观 地 分 析出 这 种 感觉 差异 的 标准 , 那么 就 可 以 利用 它 说 明 这 种 感觉 上 的 差异 了 。 
表现 色彩 感 名 差异 


使 用 纯度 较 高 的 红色 与 灰色 相 搭配 ， 表 现 出 喜庆 的 氛围 ， 而 通过 多 种 不 同色 相 颜色 的 辅助 ， 能 
表现 出 欢乐 的 印象 ， 如 图 1-50 所 示 。 使 用 不 同 明度 的 蓝 色调 进行 搭配 ， 让 人 感觉 沉稳 、 理 智 ， 常 用 
于 表现 科技 感 ， 如 图 1-51 所 示 。 


Funny School 


ET 
ET 


EP 


,该 网 页 以 红色 为 主 ， 加 入 了 一 些 灰 色 ， 呈 现 出 欢 ， ， 蓝 色 是 天 空 和 海洋 的 色彩 ， 有 着 天 空 和 海洋 的 辽 ， 

| 乐 的 印象 ， 起 到 呼应 主题 的 作用 。 红 色 在 中 国 传 ， | 阔 和 深沉 ， 给 人 以 冷静 、 理 智 的 印象 ， 使 用 不 同 | 

| 统 色彩 印象 中 是 节日 庆典 的 主 色 。 | ， 明度 的 蓝 色 搭配 ， 也 可 呈现 出 炫目 的 科技 感 。 | 
图 1-50 图 1-51 


2 不 同 单 色 的 印象 差异 p 


红色 会 给 人 一 种 动态 的 感觉 , 反之 蓝 色 会 给 人 一 种 静态 的 感觉 。 黄色 给 人 一 种 动态 、 柔 和 的 感觉 ， 
而 绿色 虽然 也 是 较 柔 和 的 感觉 ， 但 不 会 给 人 动态 的 感觉 ， 也 不 会 给 人 静态 的 感觉 。 

黄色 是 明度 最 高 的 色彩 ， 黄 色 和 红色 一 样 引 人 注目 ， 给 人 温暖 和 充满 活力 的 感觉 ， 如 图 1-52 所 
示 。 纯 净 的 绿色 可 视 度 不 高 ， 刺 激 性 不 大 ， 对 生理 和 心理 作用 都 极为 温和 ， 给 人 以 宁静 、 安 逸 、 安 全 、 
可 靠 和 可 信任 感 ， 使 人 精神 放松 ， 不 易 疲劳 ， 如 图 1-53 所 示 。 


EE 


| 绿色 是 草地 和 树木 的 颜色 ， 与 蓝 色 一 样 是 大 | 
， 自然 的 主要 色彩 ， 给 人 以 宁静 、 安 逸 的 感觉 ，， 
， 具 有 健康 、 纯 净 的 色彩 含义 。 | 


， 该 网 页 中 大 面积 地 使 用 黄色 作为 主 色 ， 格 外 ， 
， 引 人 注目 ， 黄 色 极 具 跳 跃 感 ， 充 满 了 活力 。 


二 配 色 印 象 空间 


设计 师 在 设计 网 页 的 过 程 中 ， 绝 对 不 会 仅仅 使 用 某 一 种 颜色 ， 他 们 通常 都 需要 搭配 使 用 三 至 四 
种 甚至 更 多 种 颜色 来 获得 较 好 的 配色 效果 。 为 了 对 多 种 颜色 的 混合 使 用 进行 评价 ， 就 需要 引入 新 的 
配色 分 析 方 法 一 一 配色 印象 空间 。 


不同 的 配色 印象 空间 。” @ 


在 配色 印象 空间 中 ， 给 人 况 态 科 和 感觉 的 配色 通常 都 是 隐约 柔和 颜色 之 问 的 搭配 ， 给 人 动态 和 
和 感觉 的 配 色 通 常 都 是 鲜 这 颅 色 之 间 的 搭配 ， 给 人 动态 生硬 感觉 的 配色 通常 都 是 鲜亮 关 色 和 浑 注 早 
淡 颜 色 之 间 的 搭配 ， 给 人 静态 生硬 感觉 的 配色 通常 都 是 灰 冷 颜 色 之 间 的 措 配 。 

1. 静态 柔和 的 网 页 配色 ” 


使 用 高 明度 的 蓝 色 作 为 主 色 调 ， 搭 配 浅 灰色 与 高 明度 低 纯 度 的 黄色 ， 表 现 出 宁静 、 和 柔和 及 舒适 
的 感觉 ， 如 图 1-54 所 示 。 


2. 动态 柔和 的 网 页 配色 ”》 


使 用 纯度 较 高 的 红色 作为 网 页 主 色调 , 搭配 纯度 较 高 的 黄色 和 绿色 , 整个 页 面 让 人 感觉 动感 十 足 ， 
如 图 1-55 所 示 。 


名 ssaweb a 


om CC 


0 a a 
该 网 页 中 使 用 蓝 色 作为 主 色调 ， 加 入 了 淡 ， ， 差 别 较 大 的 色相 同时 放 到 一 起 会 给 人 杂乱 的 ， 
| 淡 的 黄色 和 浅 灰 ， 给 人 以 柔和 、 舒 适 的 视 ， ， 感觉， 但 是 该 页 面 中 很 好 地 使 用 白色 边框 作 ， 
， 觉 感受 。 ， 为 过 渡 ， 使 各 颜色 之 间 界 线 清晰 。 | 
| 图 154 和 


Eco 配色 印象 差异 © 


比 起 色相 , 人们 对 颜色 的 印象 更 大 程度 地 取决 于 色调 。 这 主要 表现 为 鲜明 的 色调 通常 给 人 柔和 、 
动态 的 印象 ， 如 图 1-56 所 示 。 阴 暗 的 色调 给 人 生硬 的 印象 ， 普 通 的 色调 给 人 生硬 、 静 态 的 印象 ， 而 
柔和 的 色调 却 会 给 人 一 种 静态 的 印象 ， 如 图 1-57 所 示 。 


在 配色 印象 空间 中 ， 相 距 较 远 的 颜色 之 间 的 印象 会 有 较 大 的 差异 ， 而 距离 较 近 的 颜色 之 间 的 印象 会 比较 相近 ， 
也 就 是 说 颜色 间 的 距离 与 印象 的 差异 程度 成 正比 例 关 系 。 


加 Ke 


“Wsaweb 
oe mo aero meen ce INTERIOR 


Se a 
| 该 网 页 中 使 用 了 几 种 中 等 纯度 但 明度 较 高 的 ,该 网 页 中 使 用 了 黑色 、 深 灰 低 纯度 和 低 明度 ， 
色彩， 给 人 以 柔和 、 动 态 的 印象 ， 使 页 面具 ， ， 的 颜色 进行 搭配 ， 整 体 给 人 静态 、 沉 稳 和 生 ， 
， 有 律动 感 ! ， 硬 的 感觉 

| 图 157 


友 配 色 案例 02: 咖啡 厅 网 页 配色 ) 


咖啡 厅 是 人 们 用 于 聚会 休闲 、 商 务 交流 的 场所 ， 遍 布 于 每 个 城市 的 大 街 小 埠 之 
中 。 史 啡 厅 的 网 页 设计 和 色彩 搭配 , 需 符合 品质 、 文 化 的 意义 和 印象 , 既 要 给 人 以 温和 、 
悠闲 的 感觉 ， 也 要 有 一 些 时 尚 气息 以 及 对 文化 内 容 和 理想 生活 方式 的 追求 。 


; 时 尚 人 士 、 商 业 人 士 
;棕色 带 给 人 安全 、 安定 和 安心 感 , 它 在 日 常生 活 中 是 比较 常用 的 色彩 ， 
与 同色 系 的 暗色 调 搭配 ， 更 加 彰显 出 稳重 的 感觉 


Enjoy the best coffee 
N/ENot 21 A¥ BYU! 
a oe MW/ 


同 设计 分 析 

名 以 棕色 为 主 色 调 ， 浅 茶色 和 浅 蓝 色 作为 辅 色 ， 表 现 出 温暖 、 舒 适 的 感觉 

四 使 用 鲜明 的 红色 、 绿 色 、 桶 色 作为 点 级 色 ， 增 加 了 页 面 的 趣味 性 ， 使 整个 页 不 会 因为 大 面 
积 的 主 色 和 辅 色 而 感到 过 于 严肃 和 冷静 ， 增 加 了 生活 的 欢乐 气息 。 


名 各 种 元 素 的 使 用 生动 而 自然 ， 充 满 时 尚 感 与 休闲 感 ， 新 颖 别致 文字 的 处 理 既 清晰 又 生动 ， 
充满 趣味 性 ， 令 人 愉悦 且 引 人 注目 。 


Enjoy the best coffee 
ee 


ee 


Enjoy the best coffee 
Bd 
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名 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


Enjoy the best coffee I Enjoy the best coffee 


Wet 2 dg BY 图 NANor 5 BB YI 
人 A 


| 配色 评价 ， 配色 评价 : | 
| GD 黑色 可 以 体现 出 高 级 感 ， 使 页 面 效 果 更 具 格调 ， 与 鲜艳 ; 蓝 色 具 有 广阔 悠远 的 气质 ， 如 果 被 局 限 或 在 结构 上 过 于 生硬 ， ; 
的 橙色 和 绿色 搭配 应 用 于 网 页 设计 中 , 增添 了 一 些 轻快 、; 会 表现 得 过 于 冷静 ， 用 在 咖啡 厅 网 页 中 ， 有 些 忧郁 、 过 于 沉 | 
休闲 的 氛围 | 静 的 感觉 ， 无 法 诠释 主题 所 要 表达 的 优质 生活 ， 也 大 大 降低 
名 黑白 相间 是 永远 不 会 过 时 的 搭配 , 一 直 位 于 时 尚 的 前 沿 ,| 了 悠闲 和 活跃 的 气氛 。 
与 茶色 和 棕色 搭配 ， 更 具 正式 感 


Wuve aken g Retions bday 


| : | 用 于 房产 销售 网 页 
| @ 棕色 具有 古 相 的 气质 ， 给 人 以 安定 和 安心 感 ， 与 灰色 搭 ; 使 用 棕色 到 深 棕色 的 渐变 色 作为 背景 色 ， 页 面 让 人 感觉 
| 。 配 ， 彰 显 出 踏实 稳重 的 感觉。 安定 、 精 致 ， 加 入 一 些 其 他 色彩 的 点 级 ， 可 以 活跃 页 


@@ 使 用 黑色 和 鲜艳 的 色彩 加 以 点 级 , 既 增加 了 一 些 趣味 性 , | 。 面 气氛 。 
也 给 人 一 些 格调 感 。 如 加 入 多 元 化 的 色彩 应 用 ， 使 页 面 主题 突出 、 动 感 十 足 。 | 


第 合 章 网 页 配色 要 求 和 规范 


尽管 我 们 可 以 在 网 上 搜罗 到 铺天盖地 的 所 谓 配 色 原理 、 配 色 宝典 和 配色 技巧 ， 然 而 配色 本 身 是 天 
法 被 量化 的 ， 既 需要 有 良 师 的 点 拨 、 艺 术 氛 围 的 桔 陶 ， 更 要 大 量 借鉴 和 总 结 成 功 的 作品 ， 并 且 勤奋 练 
习 才 能 不 断 提高 。 


网 页 配色 的 要 求 9D 


网 页 配色 水 平 的 提升 ， 是 一 个 慢 慢 积累 的 过 程 。 除 了 掌握 网 页 配色 基础 知识 外 ， 设 计 师 还 可 以 
通过 观察 、 临 摹 别 人 的 配色 方案 ， 不 断 总 结 前 人 的 经 验 ， 发 现 一 些 配 色 的 规律 和 技巧 ， 让 学 习 的 过 
程 变 得 简单 快捷 ， 以 此 来 加 深 对 色彩 的 理解 ， 提 高 配色 水 平 。 


EB 色彩 的 对 比 


对 比 在 配色 中 是 一 个 无 处 不 在 的 概念 ， 只 要 将 两 种 或 两 种 以 上 的 颜色 放 在 一 起 ， 它 们 就 会 产 和 4 
对 比 。 当 两 种 颜色 同时 被 放置 在 一 个 空间 中 时 ， 这 两 种 颜色 会 走向 各 自 色彩 效果 的 极端 。 例 如 将 红 
色 和 绿色 放 在 一 起 ， 红 色 看 起 来 更 红 ， 绿 色 看 起 来 更 绿 。 

对 比分 为 多 种 形式 ， 例 如 色相 对 比 、 明 度 对 比 和 纯度 对 比 ， 其 中 ， 色 相对 比 是 效果 最 明显 的 。 
各 种 高 纯度 的 色 块 相互 搭配 往往 能 够 对 人 的 视觉 产生 强烈 的 刺激 ， 如 图 2-1 和 图 2-2 所 示 。 


生 am 四 me em 


YOU ARE WHAT YOU EAT! 
SO ENJOY TASTING OUR PREMIUM 
PRODUCT SELECTION, 


中 


此 J 

' 人 HR 时 A A ht 1 

该 网 页 中 颜色 不 多 ， 主 要 使 用 了 无 彩色 的 ， ,该 网 页 中 使 用 了 大 面积 的 黄色 和 高 纯度 的 其 他 颜色 ， 

， 明 度 对 比 ， 很 有 文艺 气息 和 文化 素养 , 给 ， ， 相 搭配 ， 比 以 灰色 为 主 的 网 页 要 艳丽 很 多 ， 更 容易 | 

| 人 以 和 谐 、 温 和 的 感受 。 | ， 吸 引 眼 球 ， 在 第 一 时 间 引起 浏览 者 的 注意 。 | 
图 2-1 图 22 


se2 色彩 的 大 小 和 形状 E 


除了 色彩 本 身 的 对 比 之 外 ， 色 块 的 大 小 、 形 状 和 所 处 的 位 置 也 会 对 色彩 搭配 的 整体 效果 产生 


= 
型 
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大 的 影响 。 如 果 两 种 色彩 的 面积 相同 , 那么 这 两 种 颜色 的 对 比 就 会 十 分 强烈 显眼 , 相互 为 竞争 的 关系 。 
当 两 种 色彩 的 面积 不 等 时 ， 小 面积 的 色 块 就 会 成 为 大 面积 色 块 的 补充 ， 相 互 为 对 应 或 呼应 的 关系 。 


有 一 个 很 形象 的 说 法 : 万 绿 丛 中 一 点 红 。 如 果 在 一 大 片 绿叶 中 间 放 一 条 小 红 花 ， 整 个 页 面 会 显得 主题 明确 ， 协 
调 美观 。 而 如 果 给 一 个 模特 穿 上 红 上 衣 、 绿 裙子 ， 整 个 页 面 就 会 糟糕 无 比 。 


此 外 ， 不 同形 状 的 色 块 也 会 呈现 出 不 同 的 视觉 效果 ， 如 图 2-3 和 图 2-4 所 示 。 一 般 来 说 ， 直 线 


和 矩形 会 传达 出 一 种 严谨 和 科学、 中规中矩 的 感觉 ， 而 曲线 和 弧 形 则 会 传达 出 随 性 洒脱 、 个 性 张扬 的 
感觉 。 正 确 使 用 线条 和 形状 可 使 页 面 效果 更 丰富 立体 。 


| 该 网 页 大 面积 使 用 绿色 作为 背景 ， 少 量 使 用 ， | 当红 色 元 素 过 多 ， 与 绿色 的 背景 形成 竞争 关 | 

| 红色 作为 标题 文字 的 颜色 和 点 缀 色 ， 吸 引 眼 ， | 系 ， 既 不 能 起 到 衬托 和 点 绿 的 效果 ， 又 会 显 | 

， 球 又 突出 重点 。 : ， 得 杂乱 无 章 。 
图 2-3 图 2-4 


色彩 的 位 置 、@ 


色 块 在 页 面 中 所 处 的 位 置 不 同 ， 构 成 的 页 面 效 果 也 会 有 很 大 的 差别 。 色 块 的 位 置 和 大 小 往往 是 
联系 在 一 起 的 ， 例 如 在 网 页 设计 中 ， 人 们 总 会 有 意识 地 使 页 面 中 的 色 块 不 过 于 对 称 。 

如 果 页 面 的 左边 有 一 块 红色 ， 那 么 右边 的 水 平 位 置 最 好 不 要 再 安排 另 一 块 同样 大 小 同样 形状 的 
红色 ， 因 为 这 样 会 导致 版 式 过 于 对 称 ， 使 页 面 过 于 静止 。 当 然 如 果 有 意 使 用 完全 对 称 的 布局 方式 ， 
那 就 另 当 别论 ， 如 图 2-5 所 示 。 


|， 该 网 页 中 使 用 了 较 多 的 色 ， 
! 块 , 这 些 色 块 的 大 小 、 纯度 ，， 
| 搭配 的 元 素 、 明 瞳 程度 和 ， 
! 摆 放 位 置 各 不 相同 ， 看 上 ， 
| 去 或 远 或 近 ， 给 人 以 律动 ， 
| 感 和 空间 感 。 | 


色彩 搭配 原则 
总 体 来 说 ， 色 彩 搭配 需要 遵循 以 下 5 个 原则 : 整体 色调 统一 、 配 色 要 有 重点 色 、 配 色 的 平衡 、 
配色 的 节奏 和 对 比 色 的 调和 。 


SY $s pr 
1. 整体 色调 统一 


整体 色调 协调 统一 和 重点 突出 是 任何 设计 都 适用 的 原则 ， 这 可 以 使 作品 更 加 专业 和 美观 。 在 着 
手 设计 页 面 之 前 ， 应 该 先 确定 主 色 调 ， 主 色 将 会 占据 页 面 中 很 大 的 面积 ， 其 他 的 辅助 性 颜色 都 应 该 
以 主 色 为 基准 进行 搭配 ， 如 图 2-6 所 示 。 

页 面 的 整体 色调 应 该 根据 企业 的 性 质 和 想 要 表现 的 具体 风格 来 确定 。 若 选择 暖色 作为 主 色调 ， 
那么 整体 页 面 效 果 也 会 显得 温馨 亲 和 ; 若 选择 冷色 作为 主 色调 , 那么 页 面 效 果 会 呈现 清爽 理智 的 感觉 
明度 高 的 颜色 会 使 页 面 效果 看 起 来 更 加 轻松 活泼 ， 而 明度 低 的 颜色 则 会 强调 低调 沉稳 的 意象 ， 如 图 
2-7 所 示 。 


What we do 


a 
入 


,该 网 页 采用 绿色 作为 主 色调 ， 以 嫩绿 色 和 黄 绿 ， 该 网 页 使 用 烂漫 的 浅 粉色 作为 主 色 , 页， 
， 色 的 渐变 作为 背景 ， 页 面 使 用 深 绿色 矩形 背景 ， 面 整体 效果 温暖 甜美 。 文 字 选 择 了 同色 ， 
,展示 主要 内 容 ， 白 色 答 形 搭配 点 级 ， 页 面 主题 ， ， 系 的 红色 ， 在 保证 主题 明确 的 前 提 下 ， ， 
| 明确、 色调 协调 统一 。 | | 页 面色 调 高 度 统一 。 | 
人 图 26 2 


配色 时 ， 可 以 将 一 种 颜色 作为 整个 页 面 的 重点 色 ， 这 个 颜色 可 以 被 运用 到 焦点 图 、Banner， 或 
者 页 面 中 其 他 相对 重要 的 元 素 ， 使 之 成 为 整个 页 面 的 聚焦 点 ， 如 图 2-8 所 示 。 

重点 色 不 等 同 于 背景 色 , 重点 色 的 选择 应 该 满足 以 下 条 件 : (1) 比 页 面 中 的 其 他 颜色 更 强烈 显眼 ; 
(2) 与 其 他 颜色 形成 鲜明 的 对 比 ，(3) 应 该 小 面积 使 用 。 


3. 配色 的 平衡 》 


配色 的 平衡 主要 是 指 颜 色 的 强 弱 、 轻 重 和 浓淡 的 关系 。 一 般 来 说 ， 同 类 色 的 搭配 往往 能 够 很 好 
地 实现 平衡 性 和 协调 性 。 而 高 纯度 的 互补 色 或 对 比 色 ， 例 如 红色 和 绿色 ， 很 容易 给 人 的 视觉 带 来 过 
度 强 烈 的 刺激 。 如 果 能 够 缩小 其 中 一 种 颜色 的 面积 ,或 者 使 用 黑 、 白 、 灰 等 中 性 色 进行 调和 和 过 渡 ， 
那么 页 面 将 会 变 得 协调 而 稳定 ， 如 图 2-9 所 示 。 

另 一 方面 是 关于 明度 的 平衡 关系 。 高 明度 的 颜色 显得 更 明亮 ， 可 以 强化 空间 感 和 活跃 感 ， 低 明 
度 的 颜色 则 会 过 多 地 强化 稳重 低调 的 感觉 。 如 果 将 明亮 的 颜色 放 在 较 暗 的 颜色 上 面 ， 页 面 整 体 效果 
会 显得 很 稳定 ， 如 果 将 较 暗 的 颜色 放 在 明亮 的 颜色 上 方 ， 则 会 产生 一 种 动感 ， 页 面 效 果 会 很 开阔 ， 
如 图 2-10 所 示 。 


将 同一 种 颜色 反复 使 用 ， 并 以 不 同 的 形式 进行 排列 时 ， 就 会 产生 节奏 感 。 色 彩 的 节奏 通常 与 色 
块 的 形状 、 大 小 、 质 感 和 摆 放 位 置 有 很 大 的 关系 。 
逐渐 改变 颜色 的 色相 、 纯 度 和 明度 ， 并 重复 安排 色彩 ， 页 面 效 果 会 产生 有 规则 的 变化 ， 产 生 反 


keza 


复 的 节奏 。 当 页 面 中 颜色 较 多 时 ， 合 理 安排 颜色 的 节奏 是 非常 重要 的 ， 如 图 2-11 所 示 。 


be -& te 


Say Hello tothe Worldl 


| 该 网 页 使 用 浅 灰 到 深 灰 的 渐变 色 作为 背景 ， 使 用 绿色 作 ，， 该 网 页 中 拥有 同等 面积 的 黄 、 蓝 、 绿 、 品 红 、 橘 等 高 纯 ， 
| 为 主 色 ， 位 置 标志 、 主 要 图 标 及 文字 使 用 了 与 绿色 构成 ，， 度 的 色彩 ， 很 有 炫目 感 ， 能 成 功 地 吸引 用 户 的 目光 , 为 | 
， 鲜 明 对 比 的 橘红 色 ， 使 用 面积 虽 小 却 很 显眼 。 ， 了 使 页 面 协调 稳定 ， 使 用 了 灰色 进行 调和 及 过 渡 . 


ANOTHERFACE | 
PORCELAIN 


: ,该 网 页 中 深 灰 色 占 了 大 部 分 面积 ， 但 是 在 布 | 
| 为 了 突出 主体 和 标志 ， 该 网 页 使 用 了 明度 较 ， | 局 上 并 没有 一 通 到 底 ， 色 块 的 分 布 排列 不 仅 ， 


| 低 的 驼 色 和 咖啡 色 作为 主 色 和 辅 色 。 而 为 了 ， ;有 节奏 和 层次 ,而 且 能 突出 中 间 的 广告 内 容 

| 起 到 更 好 的 衬托 效果 ， 使 用 明度 更 低 的 棕色 | | 使 主体 部 分 格外 突出 、 显 眼 。 几 种 高 纯度 的 色 | 

， 作为 背景 ， 文 字 色 和 重点 色 则 使 用 明亮 的 颜 ， ， 彩 在 色相 和 明了 瞳 上 有 一 些 不 同 ， 但 色调 一 致 ， 

| 色 ， 既 强化 了 页 面 的 稳重 感 ， 又 增加 了 页 面 ， } 使 整个 页 面 有 空间 感 、 节 奏 感 、 欧 律 感 和 层次 ， 

| 的 空间 感 。 | ， 感 。 主题 突出 、 文字 清晰 、 布局 灵活 , 既 显 庄重 ， | 

| | ， 又 有 极 强 的 艺术 气息 。 | 
图 2-10 图 2-11 


5. 对 比 色 的 调和 


当 页 面 中 包含 两 个 或 两 个 以 上 的 对 比 色 时 , 就 需要 对 它们 进行 调和 , 否则 页 面 整 体 色 调 就 会 失衡 ， 
如 图 2-12 所 示 。 


[ 


通常 可 以 使 用 3 种 方法 来 一 步 步 调和 对 比 色 : (1) 调整 两 种 颜色 的 面积 ， 降 低 两 种 颜色 的 纯 
度 ， 使 色 感 减弱 ; (2) 在 页 面 中 添加 两 种 颜色 之 间 的 颜色 ， 引 导 颜 色 在 色相 上 逐渐 过 渡 ;，(3) 在 页 面 中 
添加 黑 、 白 、 灰 等 中 性 色 ， 进 一 步 削 弱 对 立 感 。 


CREATIVE TIME CREATIVE TIME 


， 该 网 页 中 的 绿色 和 红色 为 对 比 色 , 首 ， 
， 先 降低 两 种 颜色 的 纯度 ， 使 它们 在 色 ， 
.< 感 上 更 温和 。 接 着 加 入 相同 纯度 的 黄 
， 色 (因为 红色 和 绿色 中 都 包含 黄色 )， ， 
， 最 后 在 背景 中 加 入 大 片 的 浅 灰色 , 颜 | 
二 | 色调 和 完成 。 | 


eeses OOLOE 


图 2-12 


区间 和 3 配色 尽量 选择 双色 和 多 色 组 合 全 


单个 颜色 的 明暗 度 组 合 , 给 人 的 统一 感 会 很 强 , 容易 使 人 产生 印象 ; 双色 组 合 会 使 颜色 层次 明显 ， 
让 人 一 目 了 然 ， 产 生 新 鲜 感 ， 多 色 组 合 会 让 人 产生 愉悦 感 ， 丰 富 的 色彩 也 会 使 人 更 容易 接受 ， 在 色 
彩 的 排列 上 ， 也 会 因 顺序 的 变化 ， 给 人 截然 不 同 的 感觉 。 

如 果 想 让 人 产生 新 奇 感 、 科 技 感 和 时 尚 感 ， 那 么 采用 特殊 色 ， 如 金色 、 银 色 等 ， 就 能 够 产生 吸 
引 人 的 效果 ， 如 图 2-13 所 示 。 


| 金黄 色 是 由 红色 和 黄色 ， 
| 构成 的 ， 银 色 是 由 不 同 | 
| 明暗 和 纯度 的 灰色 构成 
的。 该 页 面 中 使 用 金色 | 
| 作为 主 色 ， 与 黄色 的 产 ， 
| 品 相 呼 应 ， 注 染 出 了 新 | 
， 奇 感 、 科 技 感 和 时 尚 感 。 


图 2-13 


攻 喜 革 汪 _ 尽 可 能 使 用 两 至 三 种 色彩 进行 搭配 

虽然 在 网 页 配色 时 多 色 的 组 合 能 让 人 产生 愉悦 感 ， 但 是 考虑 到 人 的 眼睛 和 记忆 只 能 存储 两 到 三 
种 颜色 ， 过 多 的 色彩 可 能 会 使 页 面 显得 较为 复杂 、 人 分散。 相反 越 少 的 色彩 搭配 能 在 视觉 上 让 人 产生 
印象 ， 也 便于 设计 者 的 合理 搭配 ， 更 容易 让 人 们 接受 ， 如 图 2-14 所 示 。 


< 
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; 该 网 页 中 虽然 使 用 绿色 、 太 阳 橙 和 蓝 ， 
可 色 3 种 对 比 强烈 的 颜色 ， 但 是 巧妙 地 ， 
| 控制 了 3 种 颜色 的 面积 ， 使 整个 页 面 ， 
， 主题 明确 ,呈现 出 开放 、 活 泌 的 气氛 ， 
， 让 人 觉得 幸福 、 亲 近 和 舒适 。 | 


图 2-14 


网 页 中 的 色彩 比例 


网 页 配色 最 忌讳 的 就 是 在 页 面 中 漫 无 目的 地 堆砌 多 种 颜色 ， 并 把 每 种 颜色 都 做 得 一 样 大 ， 页 面 
整体 看 起 来 像 一 个 调 色 盘 一 样 。 正 常情 况 下 建议 一 个 页 面 最 好 不 要 超过 3 种 颜色 ， 下 面 探究 一 下 不 
同 颜色 的 比例 关系 。 


2 主 色 、 辅 色 和 重点 色 便 


网 页 中 的 颜色 按 作用 可 大 致 分 为 以 下 3 种 。 

主要 颜色 : 也 称 为 主 色 调 ， 可 以 清楚 地 表现 网 页 内 容 性 质 ,是 支配 整个 页 面 效 果 的 主导 性 颜色 ， 
面积 通常 较 大 ， 起 到 了 整体 显示 出 网 页 内 容 和 风格 的 重要 作用 。 

辅助 色 : 主要 指 辅助 主 色 的 次 要 颜色 ， 用 于 协助 主 色 营 造 整体 气氛 ， 以 丰富 页 面 效果 。 

重点 色 : 也 称 强调 色 ， 用 于 强调 配色 的 重点 ， 重 点 色 主要 是 在 网 页 中 突出 、 强 调 显示 的 内 容 区 
域 ， 通 常 只 占 较 小 的 面积 ， 主 要 用 于 按钮 和 标签 ， 如 图 2-15 所 示 。 


只 


| 该 网 页 中 使 用 的 | 

| 颜色 很 少 ， 背 景 | 

| 色 为 白色 ， 主 色 ， 

,为 青色 ， 销 色 为 ， | 页 面 中 颜色 的 比 1 
| 浅 灰色 和 黑色 ， | | 例 大 致 为 白色 | 
， 重点 色 为 红色 ， 区 | 45%， 青 色 35%， 

| 文字 色 为 黑色 。 ; | 浅 灰色 10%6， 黑 色 | 
| 我 们 从 原 图 中 抽 | 十 7%， 红 色 3%。 | 
| 象 出 后 面 的 色彩 | ， 其 中 红色 所 占 的 | 
分 布 图 ， 以 便 更 ， [=== | 比例 最 小 ， 但 它 | 
| 直观 地 查看 各 种 ， mr 2 | 却 是 页 面 中 最 显 
| 颜色 的 分 布 。 | 二 一 一 一， 限 的 颜色 。 


2 全 把 颜色 和 无 彩色 的 运用 比例 


页 面 中 鲜艳 的 暖色 和 红色 调 要 少 用 ， 黑 、 白 、 灰 等 无 色 系 应 该 多 用 。 红 、 粉 红 、 紫 红 、 橙 色 和 黄 
色 等 色彩 会 给 人 带 来 极 强 的 视觉 刺激 感 ， 更 适合 作为 重点 色 小 面积 使 用 ,用 于 强调 页 面 中 的 视觉 重点 ， 
如 果 大 面积 使 用 ， 会 给 浏览 者 的 视觉 造成 过 度 的 刺激 。 当 然 ， 如 果 正 想 表现 这 种 效果 ， 那 就 另 当 别论 。 


ED 
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很 多 国外 的 成 功 网 页 非常 乐于 使 用 这 种 降低 纯度 或 提高 明度 的 方式 来 协调 和 过 渡 对 比 色 ， 力 求 使 页 面色 调 看 起 
来 更 加 协调 、 舒 适 。 


低 纯度 颜色 的 色 感 不 明显 ， 如 果 将 几 个 不 同 颜色 的 纯度 降低 ， 或 者 将 明度 提高 ， 这 就 意味 着 色 
彩 中 的 黑色 或 白色 在 不 断 增加 ， 也 就 是 说 这 些 不 同 颜色 的 共性 在 不 断 提 升 ， 所 以 看 起 来 会 比 纯色 搭 
配 在 一 起 更 加 协调 ， 如 图 2-16 所 示 。 


| 该 网 页 中 的 黑 、 自 、 
en . | 灰 、 棕 色 、 深 蓝 色 ， 
| 该 网 页 在 色彩 分 布 上 | | 等 亚 光 黯 淡 的 颜色 ， 
很 具有 代表 性 . 颜色 分 ， | 占据 了 页 面 大 部 分 | 
布 图 直观 地 列 出 了 每 | | 的 面积 ， 而 绿色 、 | 
种 颜色 的 具体 使 用 情 ， | 橙色 等 纯度 相对 较 ， 


况 。 各 种 颜色 的 比例 ， 
大 致 为 白色 + 浅 灰色 | 


43%， 绿 色 22%， 深 蓝 | | 颜色 的 色 感 并 不 明 | 
色 15%， 橙色 5%， 棕 | | 显 ， 使 页 面 看 起 来 | 


| 色 5%, 深 粉 色 5%， | ， 更 协调 舒适 。 ! 
! 黑色 5%。 ! i 


0 图 2-16 


2 色彩 的 层次 ”@ 


色彩 的 层次 是 指 将 图 像 去 色 之 后 ， 有 没有 表现 出 从 黑 到 灰 到 白 的 存在 比例 。 如 果 页 面 中 的 黑色 
比较 多 ， 那 么 整体 效果 就 会 显得 沉重 ， 如 果 白 色 很 多 ， 就 会 显得 苍白 ， 如 果 灰色 比较 多 ， 那 么 整个 
页 面 就 会 显得 很 脏 。 

颜色 纯度 越 高 ， 明 度 越 高 ， 就 会 显得 越 活 泼 ， 给 人 一 种 前 进 的 感觉 ， 反 之 纯度 越 低 ， 明 度 越 低 ， 
就 会 给 人 感觉 沉静 ， 入 后退。 有效 利 用 这 一 点 即 可 构建 出 良好 的 层次 感 ， 如 图 2-17 所 示 。 


| 高 的 颜色 只 占 很 小 | 
| 的 一 部 分 。 低 纯度 | 


| 该 网 页 通过 去 色 后 ， | 
， 可 以 清楚 地 看 到 ， 虽 ， 
， 然 页 面 中 的 颜色 很 单 ， 
| 调 ， 但 是 去 色 后 我 们 | 
| 仍然 可 以 丝毫 不 受 影 | 
， 响 地 分 辨 出 每 个 元 素 | 
| 的 面 瑶 ， 黑 白灰 的 层 
| 次 非常 明显 ， 所 以 页 ; 
， 面 效果 的 空间 感 很 好 。 


图 2-17 


大 配色 案例 03: 视频 网 站 的 网 页 配色 。 ( 傅 ) 


高 纯度 和 高 明度 的 绿色 会 非常 引 人 注 目 ， 与 同类 色 和 邻近 色 搭 配 可 以 表现 出 友好 
的 态度 ， 使 用 对 比 色 搭配 ， 轻 松 优雅 的 氛围 中 流露 出 一 种 强大 的 力量 ， 给 人 以 希望 和 
生命 力 ， 而 当 与 无 彩色 中 的 深 灰 和 黑色 搭配 时 ， 会 形成 强烈 的 对 比 ， 显 得 更 加 鲜亮 。 
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:it | 


受 ， 


“”! 同时 也 呈现 出 现代 人 对 美好 生活 的 向 往 和 追求 


En 有 tt np ts i 4 


! 绿色 、 深 灰色 、 黑 色 


@ ”设计 分 析 

@ 使 用 高 纯度 的 绿色 作为 主 色 ， 具 有 很 强 的 吸引 力 ， 使 用 黑色 和 深 灰 色 作 为 辅 色 ,使 绿色 更 加 
耀眼 ， 呈 现 出 强劲 的 生命 力 ， 且 增加 神秘 气息 。 

@ 整体 结构 极为 简化 ， 既 错落 有 致 又 显得 整齐 ， 主 色 和 辅 色 在 明暗 上 的 变化 和 搭配 增加 了 空间 
感 和 层次 感 ， 使 整个 页 面 结 构 看 上 去 简单 却 不 过 于 单调 。 

@ 使 用 白色 作为 文字 色 和 重点 色 ， 成 功 地 吸引 了 人 们 的 注意 ， 将 重点 部 分 以 最 快 的 速度 映 入 眼 
帘 ， 与 绿色 搭配 时 柔和 、 清 晰 ， 与 黑色 搭配 则 更 加 突出 。 
@ 绘制 步骤 


| 第 1 步 ， 创建 整体 框架 ， 确 | 第 2 步 : 添加 标题 , 添加 文字 ,| 第 3 步 : 插入 文字 和 图 片 ，} 第 4 步 ， 把 控 细节 ， 调 整 局 | 
| 定 主 色 和 辅 色 。 | 确定 文字 色 。 | 完成 整体 布局 内 容 的 制作 。 | 部 明暗 、 渐 变 和 层次 。 | 


ES ss mee: 


句 配色 方案 


名 延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


LATEST TV NEWS MATEST TY aow usan 


) 深远 、 广 阔 的 蓝 色 与 黑色 的 搭配 ， 增 加 了 许多 亮丽 感 ， 作 | 
! 为 受众 度 最 高 的 颜色 ， 能 够 被 广大 浏览 者 所 接受 。 ! 和 深 灰 色 措 配 的 时 候 ， 会 增添 几 分 亮丽 ， 奢 华 而 明 艳 。 | 
1@ 无 论 是 蓝 色 还 是 黑色 ， 与 重点 色白 色 搭配 不 但 清晰 、 一 目 ;(@ 黑色 本 身 具有 十 分 庄重 的 神秘 感 ， 给 人 以 庄严 的 印象 ， 用 
! ”了 然 ， 而 且 给 人 一 种 高 品质 的 视觉 体验 ， 在 神秘 感 的 基础 ， ”在 此 处 与 大 面积 的 紫色 搭配 ， 神 秘 感 过 重 ， 有 些 诡异 的 气 


氛 ， 缺 少 乘 和 感 和 活跃 度 ， 过 于 纯净 的 白色 的 调和 作用 不 | 


) 绿色 既 象征 着 希望 ， 又 给 人 以 平和 的 印象 ， 深 绿 、 浅 绿 和 
黄 绿色 的 搭配 与 融合 ， 表 现 了 较为 张扬 的 个 性 ， 显 得 激情 
而 绚丽 ， 体 现 旺盛 的 生命 力 。 

使 用 深 灰色 和 浅 灰色 作为 衬托 ， 更 加 突出 绿色 的 亮丽 ， 使 
人 眼前 一 亮 ， 呈现 律 动 的 科技 感 。 
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| 应 用 于 高 尔 夫 俱乐部 网 页 
MD 使 用 郁 部 葱 草 的 高 尔 夫 球场 作为 页 面 的 重点 ， 非 常 直接 
; 。 地 传递 了 自信 与 生机 云 勃 的 力量 ， 给 人 一 种 正 能 量 ， 令 ; 
; 人 神往 。 
; @ 使 用 深 绿色 和 黑色 的 搭配 ， 增 添 了 一 些 端庄 、 正 式 和 神秘 ; 
E> |; 。 的 气息 ， 给 人 以 品质 感 和 高 雅 感 
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Fe 


网 页 中 的 留 白 艺术 9 


网 页 中 的 留 白 也 是 页 面 的 一 个 组 成 部 分 ， 应 该 与 图 片 、 文 字 和 动画 等 元 素 一 同 进行 设计 。 很 多 
设计 作品 的 细节 部 分 处 理 得 很 到 位 ， 但 是 因为 版 面 留 白 不 够 而 给 人 造成 一 种 强烈 的 室 息 感 ， 很 容易 
造成 视觉 疲劳 。 


页 面 布局 讲究 均衡 、 节 奏 和 韵律 ， 而 这 些 在 很 大 程度 上 都 是 借助 于 留 白 的 作用 。 合 理 使 用 留 白 
可 以 调剂 不 同 元 素 之 间 的 关系 ， 使 不 同 元 素 排列 得 更 加 连贯 ， 整 个 版 面 的 布局 更 加 合理 。 试 想 一 
如 果 一 个 页 面 摆 满 了 图 片 文字 ， 一 丝 空隙 都 不 留 ， 又 谈 何 节 奏 感 和 韵律 感 ， 如 图 2-18 所 示 。 


| 该 网 页 的 模式 在 生活 中 随处 可 ， 
| 见 ， 排 版 方式 过 于 死板 ， 文 字 颜 ， 
| 色 看 上 去 也 过 于 复杂 ， 且 除了 | 
必要 的 间距 之 外 几乎 没有 留 白 ，! 
， 整个 版 面 塞 满 了 东西 ， 虽 然 整体 ， 


;看 起 来 不 至 于 让 人 厌恶， 但 也 很 
| 难 让 人 记 住 。 


利用 网 碳 留 和 可 以 正确 家 现 出 网 页 的 特征 。 克 面 中 各 个 元 素 之 间 的 留 白 较 大 ， 而 且 配色 节奏 舒 
组 ， 那 么 页 面 就 会 呈现 出 非常 明显 的 舒适 休闲 的 感觉 ， 如 果 各 个 元 素 排 列 紧凑 ， 且 留 白 较 少 ， 配 色 
节奏 快 ， 那 么 整个 页 面 就 会 呈现 刺激 紧张 的 感觉， 如 图 2_19 所 示 。 
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EXHIieITIGRNS 


} 该 网 页 中 虽然 元 素 较 多 ， 但 都 用 ， 
， 块 状 归 类 得 井 间 有 条 ， 而 且 每 块 ， 
| 文字 每 张 图 片 都 有 适当 的 空白 。 
， 再 加 上 巧妙 的 配色 ， 整 个 版 面 充 
， 满 了 跳跃 感 与 空间 感 ， 艺 术 、 高 | 
， 雅 且 内 容 丰富 ， 使 人 印象 深刻 。 


过 过 留 白 的 不 同体 现 _ 全 

传统 意义 上 留 白 就 是 在 一 片区 域 中 留 有 空白 ， 然 而 我 们 有 时 需要 突破 “ 留 白 就 是 完全 的 空白 " 
这 种 局 限 的 观念 。 因 为 颜色 本 身 就 有 体积 感 和 重量 感 ， 所 以 利用 颜色 的 色 块 来 平衡 页 面 布局 也 是 常 
用 手法 ， 如 图 2-20 所 示 。 


| 不 同色 块 的 排列 组 合 ， 以 及 文字 | 
， 和 图 片 之 间 的 结合 ， 借 助 于 颜 ， 
| 色 的 冷淡 和 轻重 ， 就 可 以 轻 而 ， 
， 易 举 地 表现 出 空间 感 和 动态 感 。 | 
| 采用 这 种 排版 手法 ， 网 页 上 没有 ， 
， 任何 纯粹 的 留 自 区域 ， 但 是 可 以 ， 
| 靠 一 些 色 块 和 简单 的 图 片 来 表 | 
， 现 空间 感 ， 原 理 也 同 留 白 一 样 . 


transport 


基于 色相 的 配色 p 


当 依据 色相 去 设计 策划 一 个 网 页 配色 方案 时 ， 获 得 的 效果 会 比较 鲜艳 、 华 丽 。 许 多 服装 在 设计 
上 采用 的 都 是 典型 的 基于 色相 的 配色 方案 ， 这 种 配色 方案 在 个 性 比较 鲜明 的 网 页 上 应 用 较为 广泛 。 


区 本 和 基于 色相 的 配色 关系 人 
采用 不 同色 调 的 同一 色相 时 ， 称 之 为 同一 色相 配色 ; 而 采用 邻近 颜色 配色 时 ， 称 之 为 类 似 色 相 


配色 。 同 一 色相 配色 与 类 似 色 相配 色 在 总 体 上 给 人 一 种 统一 、 协 调 、 安 静 的 感觉 。 就 好 像 在 鲜红 色 
旁边 使 用 了 暗 红 色 时 ， 会 给 人 一 种 协调 、 整 齐 的 感觉 ， 如 图 2-21 所 示 。 
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同一 色相 


| 该 图 是 以 色相 环 中 的 红色 为 基 ， 
| 准 进行 的 配色 方案 分 析 。 类 似 色 ， 

本 相 是 指 在 色相 环 中 相 邻 的 两 种 ， 
;色相 。 在 色相 环 中 位 于 红色 对 面 ， 
| 的 蓝 绿色 是 红色 的 补 色 。 


图 2-21 
补 色 的 概念 就 是 完全 相反 的 颜色 。 在 以 红色 为 基准 的 色相 环 中 ， 蓝 紫色 到 黄 绿色 范围 之 间 的 颜 
色 为 红色 的 相反 色调 。 相 反 色相 配色 是 指 搭配 使 用 色相 环 中 相距 较 远 颜色 的 配色 方案 ， 这 与 同一 色 
相配 色 或 类 似 色 配色 相 比 更 具有 变化 感 。 


基于 色相 的 配色 方法 


利用 色相 进行 配色 可 以 营造 整齐 的 氛围 ， 或 可 以 突出 各 种 颜色 所 需要 传达 的 直接 印象 。 合 理 地 
搭配 一 些 辅助 色 可 以 突出 显示 颜色 并 给 人 轻快 的 感觉 ， 而 适当 地 搭配 类 似 色 相 可 以 获得 整齐 、 宁 静 
的 效果 ， 如 图 2-22 所 示 。 


1. 相反 色相 、 类 似 色调 配色 


使 用 了 相反 的 色相 ， 类 似 的 色调 可 以 得 到 特殊 的 配色 效果 。 而 影响 这 种 配色 效果 的 最 重要 因素 
在 于 使 用 的 色调 。 当 页 面 中 为 对 比 度 较 高 的 鲜明 色调 时 ， 使 用 色相 进行 网 页 配色 将 会 得 到 较 强 的 动 
态 效果 ， 当 页 面 中 为 对 比 度 较 低 的 黑暗 色调 时 ,不同 的 色相 组 合 在 一 起 会 突显 一 种 安静 、 沉重 的 效果 ， 
如 图 2-23 所 示 。 


， 该 网 页 中 使 用 了 类 似 色 的 配色 ， 使 用 ， ， 该 网 页 中 蓝 色 与 品 红色 形成 鲜明 的 对 比 ， 两 种 颜 | 
| 了 色相 环 中 邻近 的 红 紫色 和 蓝 绿 色 ， ， 色 同时 在 背景 与 主题 图 片 中 使 用 ， 背 景 中 的 两 种 | 
， 整 体 给 人 一 种 协调 、 安 静 、 端 庄 和 高 ， 颜色 色调 相同 ， 主 题 图 片 中 的 两 种 颜色 色调 也 相 | 
， 雅 的 风格 。 | ， 同 ， 整 体 不 但 协调 平衡 ， 且 极 具 层 次 和 空间 感 

2 图 222 2 


ES oo 


相反 色相 、 类 似 色调 的 配色 可 以 获得 静态 的 变化 效果 : (1) 补 色 与 相反 色相 配色 : 强调 轻快 的 气 
氛 效 果 ， (2) 类 似 色相 与 邻近 色相 配色 : 整齐 、 安 静 的 感觉 。 

色相 配色 可 以 获得 稳定 的 变化 效果 : (1) 补 色 与 相反 色相 配色 一 一 强烈 而 鲜明 的 效果 ，(2) 类 似 色 
相 与 邻近 色相 配色 一 一 冷静 、 稳 重 的 感觉 。 


2. 相反 色相 、 相 反 色调 配色 。 ” 


采用 了 不 同 的 色相 和 色调 ， 得 到 的 效果 具有 强烈 的 变化 感 、 巨 大 的 反差 性 ， 以 及 鲜明 的 对 比 性 。 
与 相同 色调 、 相 反 色相 的 配色 相 比 ， 相 反 色调 、 相 反 色相 的 配色 表现 的 是 一 种 强 弱 分 明 的 氛围 。 网 
页 配色 时 ， 这 种 配色 方案 的 强 弱 效果 取决 于 所 选 颜 色 在 整体 页 面 中 的 所 占 比 例 ， 如 图 2-24 所 示 。 


3. 无 彩色 和 彩色 的 配色 


利用 无 彩色 和 彩色 进行 网 页 配色 的 方法 可 以 营造 不 同 的 风格 效果 ， 无 彩色 主要 是 由 白色 、 黑 色 
以 及 它们 中 间 的 过 渡 色 灰色 构成 ， 由 于 色彩 印象 的 特殊 性 ， 在 与 彩色 搭配 使 用 时 ， 它 们 可 以 很 好 地 
突出 彩色 效果 。 通 过 搭配 使 用 高 亮度 的 彩色 、 白 色 以 及 亮 灰色 ， 可 以 得 到 明亮 轻快 的 效果 ; 而 低 亮 
度 彩色 以 及 暗 灰色 ， 可 以 呈现 一 种 黑暗 沉重 的 效果 ， 如 图 2-25 所 示 。 


| 网 页 背景 中 的 黑色 与 高 明度 色 形成 对 比 , 在 | | 该 网 页 中 的 背景 使 用 白色 到 浅 色 灰 的 渐变 以 | 
该 网 页 中 还 可 以 看 到 相反 的 色相 和 同色 相 的 ， ， 及 深 灰 和 黑色 ， 使 页 面 中 中 等 亮度 、 高 纯度 ， 
| 不 同 的 纯度 。 配 色 丰 富 却 又 和 谐 ， 给 人 眼前 ， ;的 几 种 色彩 更 加 突出 和 绚丽 ， 使 得 整个 页 面 ， 
| 一 亮 的 感觉 。 | | 显得 十 分 活跃 和 立体 | 
se 图 224 和 


基于 色调 的 配色 p 


基于 色调 对 网 页 进行 配色 的 方法 着 重点 在 于 色调 的 变化 ， 它 主要 通过 对 同一 色相 或 邻近 色相 设 
置 不 同 的 色调 得 到 不 同 的 颜色 效果 。 


基于 色调 的 配色 关系 


色调 指 的 是 图 像 的 相对 明暗 程度 。 同 一 色调 配色 是 指 选择 同一 色调 不 同色 相 颜色 的 配色 方案 ， 
例如 使 用 鲜艳 的 红色 和 鲜艳 的 黄色 的 配色 方案 。 类 似 色调 配色 是 指使 用 类 似 基准 色调 的 配色 方案 ， 


这 些 色调 在 色调 表 中 比较 靠近 基准 色调 。 相 反 色 调配 色 是 指使 用 基准 色调 相反 色调 的 配色 方案 ， 这 
些 色调 在 色调 表 中 远离 基准 色调 ， 如 图 2-26 所 示 。 


| 
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| 该 网 页 虽然 黑白 灰 占 用 了 大 | 
， 部 分 空间 ， 但 红色 和 黄色 格 ， 
| 外 鲜艳 。 色 相 之 间 的 对 比 给 ， 
， 人 鲜明 的 印象 ， 让 人 产生 兴 ， 
| 奋 的 感觉 。 ! 


基于 色调 的 配色 方法 @ 
基于 色调 的 网 页 配色 可 以 给 人 一 种 统一 、 协 调 的 感觉 ， 避 免 色彩 的 过 多 应 用 给 网 页 造成 繁杂 、 


喧闹 的 印象 ， 这 种 配色 方案 可 以 通过 控制 一 神 颜色 的 明暗 程度 ， 制 造 出 具有 鲜明 对 比 感 的 效果 ， 或 
者 是 制造 出 冷静 、 理 性 、 温 和 的 效果 。 
1. 同一 或 类 似 色相 、 类 似 色 调配 色 

在 网 页 配色 中 使 用 可 以 产生 冷静 、 理 性 、 整 齐 而 简洁 的 效果 ， 但 如 果 选 择 了 极为 鲜艳 的 色相 ， 
那么 将 会 给 人 一 种 强烈 的 视觉 变化 ， 会 给 人 带 来 一 种 尊贵 、 华 丽 的 印象 。 总 的 来 说 ， 使 用 类 似 色相 
和 类 似 色调 进 行 网 页 配色 可 以 带 来 冷静 、 整 齐 的 感觉， 类 似 的 色相 能 够 表现 出 页 面 的 细微 变化 ， 如 
图 2_27 所 示 。 

色调 配色 主要 是 基于 色调 的 变化 进行 配色 ， 总 体 规律 大 致 归纳 为 (1) 亮色 调 在 网 页 中 运用 带 来 
鲜明 的 对 比 感 ，(2) 暗色 调 带 来 冷静 、 温 和 的 理性 感觉。 


2. 同一 或 类 似 色相 、 相 反 色 调配 色 
这 种 网 页 配色 方案 主要 是 使 用 同一 或 类 似 的 色相 ， 但 使 用 不 同 的 色调 进行 配色 ， 它 的 效果 就 是 
在 保持 页 面 整齐 、 统 一 的 同时 能 很 好 地 突出 页 面 的 局 部 效果 。 


类 似 色相 、 相 反 色 调 的 配色 可 以 获得 统一 、 突 出 的 效果 ， 配 色 时 色调 差异 越 大 ， 突 出 的 效果 就 
越 明显 ， 如 图 2-28 所 示 。 


| 该 网 页 使 用 了 杠 色 、 桥 黄色 和 太阳 杠 类 似 | 
,色相 组 成 ， 页 面色 调 对 比 统一 、 协 调 ,给 ， 
， 人 以 生机 吉 吉 的 美好 印象 | 


3. 渐变 配色 》 
这 种 配色 方案 主要 是 以 颜色 的 排列 为 主 ， 浏 览 大 多 数 的 网 页 ， 几 乎 每 个 网 页 都 会 有 渐变 这 样 的 


[和 


| 该 网 页 背景 由 统一 一 的 蓝 色色 相 组 成 ， 5 
， 页 面 分 成 了 两 个 区 域 。 


ES 


配色 案例 ， 按 照 一 定 规律 逐渐 变化 的 颜色 ， 会 给 人 一 种 富有 较 强 韵律 的 感受 ， 渐 变 可 以 分 为 色相 渐 
变 和 色调 渐变 ， 如 图 2-29 所 示 。 


,该 网 页 使 用 了 典型 的 渐变 配 | 
， 色 方案 ， 色 彩 的 过 渡 变 化 让 | 
， 网 页 有 了 一 种 律动 感 ， 富 于 | 
4 变化 和 层次 感 。 网 页 的 下 半 | 
， 部 分 使 用 不 同 的 色相 来 划分 | 
,页 面 中 的 不 同 内 容 ， 渐 变色 | 
,与 白色 的 明显 过 渡 ， 又 增加 | 
| 了 简洁 、 整 齐 、 大 气 的 风格 。 | 


图 2-29 


AN 
交配 色 案例 04: 网 络 技术 网 页 配色 (WB) 
4 
金 蓄 花 色 是 一 种 欢乐 的 颜色 ， 如 同 冬日 的 阳光 一 样 给 人 温暖 ， 象 征 着 丰富 、 光 
辉 和 美丽 , 适用 于 表现 开放 的 年 轻 态 , 与 同类 色 、 邻 近 色 搭配 , 色调 统一 而 不 失 开放 ， 
给 人 一 种 活跃 、 友 好 的 感觉 。 


回 ”设计 分 析 
GD 金 蓄 花 色 是 介 于 橙色 和 黄色 之 间 的 一 种 过 渡 色 ， 既 有 引 人 注 目的 能 量 ， 又 具有 温和 、 温 暖 的 


印象 ， 作 为 主 色 ， 可 以 有 效 提高 亲和力 ， 使 人 觉得 容易 亲近 。 

@ 整体 结构 简洁 ， 是 完美 的 扁平 主义 风格 ， 结 构 简单 却 有 层次 ， 金 蓄 花 色 与 淡 黄 色 搭配 ， 属 于 
同色 系 中 的 搭配 ， 给 人 一 种 轻柔 、 和 芒 可 亲 的 感觉 。 

@ 灰色 的 融入 ， 可 以 提高 产品 的 品质 ， 增 加 高 端 、 大 气 的 氛围 ， 与 金 芳 花 色 和 淡 黄色 相 搭配 协 
调 、 舒 适 ， 充 满 科技 感 和 生活 气息 。 
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E 绘制 步 


色 和 


加 ”延伸 方案 


V 


红色 是 热情 的 象征 ， 而 酒 红色 比 红 色 更 富有 韵味 ， 是 国际 1 
时 尚 界 十 分 流行 的 颜色 ， 与 纯 红色 搭配 ， 能 给 人 富足 、 充 
实 的 感受 。 

灰色 是 中 庸 的 颜色 ， 在 过 于 炙热 和 过 于 冷清 的 颜色 中 都 可 
以 起 到 调和 的 作用 ， 常 被 用 于 电子 产品 等 高 端 科技 产业 ， 
具有 稳定 感 和 信任 感 。 


@ ”相同 色 系 应 用 于 其 他 网 页 


Baltergo\ CE 证 


1 应 用 于 电话 销售 网 页 1 应 用 于 烘焙 技术 网 页 

io 橘 黄色 的 亮丽 与 活力 能 够 令 人 愉悦 并 让 人 有 振奋 的 力量 , io 鲜亮 的 铬 黄色 是 显眼 是 有 个 性 的 色彩 , 既 欢快 又 富有 个 性 ,; 
与 金 蓄 花 色 搭配 显得 欢快 和 热闹 。 与 金 芳 花 的 搭配 给 人 以 爽朗 的 印象 ， 中 间 的 过 六 产生 浓 角 | 

|@ 法 灰色 增加 了 整体 页 面 的 格调 ， 是 非常 好 的 衬托 ， 是 让 整 的 色泽 感 。 

;GD 与 咖啡 色 的 措 配 增强 了 人 们 的 食欲 感 ， 让 人 联想 到 深厚 的 | | 
巧克力 和 黄油 的 香味 。 


配色 要 力求 打动 人 心 Dp 


不 同类 型 的 网 页 有 着 不 同 的 传达 任务 ， 有 着 不 同 的 浏览 群体 , 配色 能 够 符合 浏览 者 的 心理 需要 ， 
与 浏览 者 产生 共鸣 ， 起 到 与 目标 一 致 的 作用 ， 是 我 们 需要 探讨 的 重要 事项 。 


二 汗 配色 要 让 浏览 者 产生 好 感 合 


浏览 者 在 浏览 网 页 内 容 的 同时 ， 对 网 页 色彩 的 需要 不 是 没有 目标 的 ， 一 定 是 有 某 种 印象 需要 通 
过 颜色 来 传达 。 例 如 鲜艳 的 暖色 会 表达 一 种 热烈 欢快 的 印象 柔和 的 冷色 传达 一 种 沉静 、 安 稳 的 印象 。 
此 外 ， 浪 漫 的、 厚重 的 、 自 然 的、 都 市 的 、 现 代 的 与 古典 的 ， 这 些 不 同 的 印象 需要 不 同 的 色彩 搭配 
进行 传达 ， 如 图 2-30 所 示 。 


MS 


| 该 网 页 使 用 粉色 作为 主 | 
， 色 ,粉色 是 女性 化 的 颜色 ， 
| 也 是 年 轻 的 颜色 ， 给 人 温 | 
， 世 、 甜 美和 稚嫩 的 印象 
与 产品 的 颜色 和 谐 统一 ， ， 
,将 女性 的 魅力 发 挥 得 淋漓 ， 
| 尽 致 ， 彰 显 出 令 人 愉悦 的 ， 
| 气息 ， 非 常 符合 浏览 群体 ， 
， 的 需要 和 感受 。 


图 2-30 
如 果 配 色 与 头脑 中 的 这 些 印象 不 一 致 ， 那 么 网 页 中 的 配色 无 论 如 何 精彩 ， 都 不 会 吸引 关注 ， 只 


有 好 的 配色 才能 打动 人 心 。 


罗 ee 
使 人 产生 共鸣 的 配色 方法 -人 龟 


配色 时 精确 地 表现 一 种 色彩 印象 不 是 一 件 容易 的 事 ， 这 需要 很 强 的 审美 能 力 和 经 验 ， 在 配色 的 
过 程 中 , 要 充分 利用 人 们 对 色彩 的 共鸣 。 当 人 们 看 到 粉红 色 时 , 会 有 可 爱 、 浪 漫 的 感觉 ; 看 到 深蓝 色 时 ， 
会 有 忧郁 的 感觉 ， 看 到 灰色 时 ， 会 有 理性 、 现 代 的 感觉 ， 如 图 2-31 所 示 。 


， 深蓝 色 本 身 就 有 冷静 、 深 ， 
| 远 的 特点 ， 该 网 页 在 深蓝 ， 
' 的 基础 上 加 入 了 大 量 的 ， 
| 黑 ， 多 了 几 分 神秘 、 冷 峻 ， 
， 的 印象 ， 同 时 使 明亮 的 黄 ， 
， 色 更 加 耀眼 ， 在 幽静 中 进 ， 
| 发 出 热情 ， 呈 现 对 高 端 品 ， 
| 质 追 求 的 欲望 


图 2-31 


色彩 有 色相 、 明 度 和 纯度 等 属性 ， 这 些 属 性 的 不 同 状态 ， 都 传达 着 不 同 的 色彩 印象 。 将 这 些 属 


性 尺度 化 ， 就 能 轻松 表达 网 页 所 传达 给 浏览 者 的 印象 。 


芝 ， 


E 江 3 所 下 网 页 配色 的 基本 方法 。 2 


色彩 搭配 是 网 页 设计 和 制作 中 非常 重要 的 环节 ， 一 个 合格 的 网 页 设计 师 应 该 熟练 掌握 色彩 的 原理 


和 基础 ， 并 合理 使 用 这 些 知 识 进 行 有 效 配 色 ， 正 确 体现 出 页 面 的 风格 。 


网 页 配色 的 整体 结构 


在 设计 和 制作 网 页 时 ， 可 以 根据 具体 需求 选择 页 面 的 背景 ， 通 常 可 以 是 纯色 、 渐 变 


色 、 图 案 或 


者 图 像 。 


ee 使 用 颜色 作为 背景 


使 用 纯色 作为 背景 是 最 常用 的 一 种 操作 方法 。 网 页 背景 色 的 面积 一 般 都 比较 大 ， 在 页 面 中 属于 


非常 重要 的 部 分 ， 所 以 需要 考虑 企业 的 性 质 及 页 面 所 要 表达 出 来 的 氛围 和 意象 合理 选 色 。 


以 选择 黑色 或 深 棕色 作为 背景 色 ， 要 表现 复古 质朴 的 感觉 ， 可 以 选择 棕 黄 色 或 浅 灰 


例如 ， 要 表现 清爽 干净 的 感觉 ， 可 以 选择 天 蓝 色 作为 背景 色 ， 要 表现 深邃 沉稳 的 感觉 ， 可 
色 作 为 


色 ， 如 图 3-1 所 示 。 


: #fcc31a 
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图 3-1 


: #edece8 | 
: #00aab9 | 


: #000000 


渐变 色 可 以 实现 两 种 或 多 种 颜色 柔和 过 渡 的 效果 ， 用 来 作为 网 页 的 背景 也 是 很 不 错 的 选择 。 如 


果 使 用 得 当 ， 可 以 很 好 地 强调 页 面 的 景深 效果 ， 使 页 面 整 体 效 果 更 加 立体 和 丰满 ， 如 图 3-2 所 示 。 
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| 背景 色 : #ffff | 
| 国 国 主 色 : #00aad5 |， 
， 国 辅 色 : #000000 | 


文本 色 : ##fffff 
一 六 一 入 -一 昌 
图 3-2 
使 用 图 片 作为 背景 


一 般 来 说 ， 不 提倡 使 用 图 片 作为 网 页 的 背景 ， 原 因 有 二 : 第 一 ， 影 响 下 载 速度 。 纯 色 和 渐变 色 
的 下 载 速度 基本 可 以 忽略 不 计 ， 而 图 片 却 需要 时 间 下 载 ， 第 二 ， 影 响 文 字 显示 效果 。 颜 色 过 于 复杂 
的 图 片 很 可 能 会 使 局 部 文字 难以 辨认 ， 降 低 文字 的 可 阅读 性 。 

那么 什么 样 的 图 片 适合 作为 背景 呢 ? 答案 是 颜色 比较 单一 、 色 调 柔 和 、 内 容 简单 的 图 片 。 这 样 
的 图 片 往 往 能 够 很 好 地 衬托 出 页 面 中 的 其 他 重要 元 素 ， 不 会 喧 宾 夺 主 ， 同 时 又 能 丰富 页 面 效果 ， 例 
如 淡化 的 网 页 Logo、 蓝 天 白云 和 木 纹 等 ， 如 图 3-3 所 示 。 


Work Life Balance - : #4b536a | 
Reality or Myth? | 色 : #1dcb8b ， 
| 辅 色 : #4e74ff 
: #ffffff 


我 们 可 以 使 用 不 同 的 调整 手法 将 一 张 图 片 调整 得 更 符合 网 页 风格 ， 比 较 常用 的 有 模糊 、 压 暗 和 改变 色调 等 。 如 
果 要 突出 图 片上 的 文字 ， 可 以 像 上 图 一 样 在 文字 下 方 涂抹 一 层 半 透明 的 颜色 。 


网 页 文字 颜色 p 


网 页 中 的 文字 主要 分 为 标题 文字 和 正文 文字 ， 其 中 正文 文字 的 面积 通常 比较 大 ， 且 样式 单一 ， 
它 的 颜色 会 对 整体 页 面 效 果 产 生 很 大 的 影响 。 


[ey 


文字 的 排版 规划 @ 


网 页 中 最 重要 的 两 个 元 素 就 是 图 像 和 文字 ， 而 大 部 分 网 页 的 主题 信息 部 分 都 是 文字 ， 如 图 3-4 
所 示 。 文 字 的 主要 目的 就 是 明确 地 传达 信息 ， 所 以 要 求 有 很 高 的 阅读 性 。 这 意味 着 我 们 不 能 使 用 过 
多 的 装饰 性 元 素 去 修饰 它 ， 这 会 使 文字 阅读 起 来 很 费力 。 
概括 来 讲 , 我 们 通常 需要 遵循 以 下 规则 , 使 页 面 的 文字 既 易于 阅读 , 又 不 会 在 视觉 效果 上 打折 扣 。 
加 ”对比 : 要 从 文字 大 小 、 颜 色 、 粗 细 、 明 暗 和 疏 密 等 各 个 方面 对 不 同文 字 进行 对 比 ， 使 文字 效果 
更 丰满 。 
加 统一 协调 : 文字 的 编排 效果 应 该 为 网 页 整体 效果 服务 ， 在 确保 整体 协调 性 的 前 提 下 对 局 部 进行 
对 比 。 
加 ”节奏 与 韵律 : 在 页 面 中 重复 使 用 有 特征 的 文字 造型 ， 并 按照 一 定 的 规律 进行 排列 ， 就 会 产生 强 
烈 的 节奏 与 韵律 感 ， 这 有 利于 加 强 网 页 的 专业 性 。 


该 网 页 中 仅仅 使 用 一 
| 些 简单 的 图 形 和 颜 | 
， 色 ， 以 文字 为 主 , 在 ， 
| 形式 和 排列 方法 上 变 ， 
， 换 排列 方式 ， 使 页 面 
， 看 上 去 整齐 、 整 洁 且 | 
| 有 趣味 性 。 


FRESH PRODUCTS 


图 3-4 


区 2 文字 配色 要 考虑 可 读 性 (@ 


比 起 图 像 或 图 形 布局 要 素来 ， 文 字 配 色 就 需要 更 强 的 可 读 性 和 可 识别 性 。 所 以 文字 的 配色 与 背 
景 的 对 比 度 等 问题 就 需要 多 费 些 脑筋 。 很 显然 ， 文 字 的 颜色 和 背景 色 有 明显 的 差异 ， 其 可 读 性 和 可 
识别 性 就 很 强 。 这 时 主要 使 用 的 配色 是 明度 的 对 比 配色 或 者 利用 补 色 关系 的 配色 。 


使 用 灰色 或 白色 等 无 彩色 背景 ， 其 可 读 性 高 ， 与 别 的 颜色 也 容易 配合 。 但 如 果 想 使 用 一 些 比较 有 个 性 的 颜色 ， 


就 要 注意 颜色 的 对 比 度 问题 。 多 试验 几 种 颜色 ， 要 努力 寻找 那些 熟悉 的 、 适 合 的 颜色 -。 


统一 的 配色 ， 可 以 给 人 一 贯 性 的 感觉 ， 并 且 方 便 配色 。 另 外 ， 在 文字 背景 下 使 用 图 像 ， 如 果 使 
用 对 比 度 高 的 图 像 ， 那 么 可 识别 性 就 要 降低 。 这 种 情况 下 就 要 考虑 图 像 的 对 比 度 ， 并 使 用 只 有 颜色 
的 背景 。 


志文 字 大 小 与 配色 关系 一 全 


实际 上 ， 要 想 在 网 页 中 恰当 地 使 用 颜色 ， 就 要 考虑 各 个 要 素 的 特点 。 背 景 和 文字 如 果 使 用 近似 
的 颜色 ， 其 可 识别 性 就 会 降低 ， 这 是 文字 字号 大 小 处 于 某 个 值 时 的 特征 ， 即 各 要 素 的 大 小 如 果 发 生 
了 改变 ， 色 彩 也 需要 改变 。 

网 页 文字 设计 的 一 个 重要 方面 就 是 对 文字 色彩 的 应 用 ， 合 理 地 应 用 文字 色彩 可 以 使 文字 更 加 
醒目 、 突 出 ， 以 有 效 地 吸引 浏览 者 的 视线 ， 而 且 还 可 以 烘托 网 页 气氛 ， 形 成 不 同 的 网 页 风格 ， 如 
3-5 所 示 。 
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标题 字号 大 小 如 果 大 于 一 定 的 值 ， 即 使 使 用 与 背景 相近 的 颜色 ， 对 其 可 识别 性 也 不 会 有 太 大 的 
妨碍 。 相 反 , 如 果 与 周围 的 颜色 互 为 补充 , 可 以 给 人 整体 上 协调 的 感觉 。 如 果 整 体 使 用 比较 接近 的 颜色 ， 
那么 就 对 想 调整 的 内 容 使 用 它 的 补 色 ， 这 也 是 配色 的 一 种 方法 。 网 页 中 的 文字 色彩 应 和 网 页 的 功能 、 
表现 主题 、 文 字 内 容 结合 起 来 考虑 ， 如 图 3-6 所 示 。 


(Ba 


ORIGINAL DRINK 


City ir] The eaeeryou ap thelle you tlieree 


he 
二 网 nl 
WM 


of AMERICA 


| 该 网 页 使 用 深 灰色 的 背景 ， 白 色 的 文字 ， 极 简 式 的 。 ;该 网 页 中 标题 文字 较 大 ， 虽 然 与 背景 颜色 没有 构成 | 
| 网 页 设计 风格 ， 主 是 文字 醒目 、 突 出 ， 且 带 有 艺术 ， 鲜 明 的 对 比 ， 但 仍然 清晰 易 识 别 ， 整体 上 给 人 以 协 | 
| 效果。 ，。 ， 调 的 感觉 

图 3-5 图 3-6 


确定 应 用 网 页 配色 的 要 领 ( 


色彩 是 很 主观 的 东西 ， 你 会 发 现 ， 有 些 色彩 之 所 以 会 流行 起 来 ， 深 受 人 们 的 喜爱 ， 那 是 因为 配 
色 除 了 着 重 原则 以 外 ， 它 还 符合 以 下 几 个 要 素 。 
加 ”顺应 了 政治 、 经 济 、 时 代 的 变化 与 发 展 趋 势 ， 和 人 们 的 日 常生 活 息息相关 。 
名 ”明显 和 其 他 有 同样 诉求 的 色彩 不 一 样 ， 跳 脱 传统 的 思维 ， 特 别 与 众 不 同 。 
加 ”浏览 者 看 到 后 是 不 会 感到 厌恶 的 ， 因 为 不 管 是 多 么 与 概念 、 诉 求 、 形 象 相符 合 的 色彩 ， 只 要 不 
被 浏览 者 所 接受 ， 就 是 失败 的 色彩 。 
人 @ 与 图 片 、 照 片 或 商品 搭配 起 来 ， 没 有 不 协调 感 ， 或 有 任何 怪异 之 处 。 
© 
© 


能 让 人 感受 到 色彩 背后 所 要 强调 的 故事 性 、 情 绪 性 和 心理 层面 的 感觉 。 

在 页 面 上 的 色彩 有 层次 ， 由 于 不 同 内 容 或 主题 ， 所 适合 的 色彩 不 尽 相同 ， 因 此 在 配色 时 也 要 切 

合 内 容 主 题 ， 表 现 出 层次 感 。 

明度 上 的 对 比 、 纯 度 上 的 对 比 以 及 冷暖 对 比 都 属于 文字 颜色 对 比 度 的 范畴 。 通 过 对 颜色 的 运用 
能 否 实现 想 要 的 设计 效果 、 设 计 情感 和 设计 思想 ， 这 些 都 是 设计 好 优秀 的 网 页 所 必须 注重 的 问题 。 


良好 的 网 页 文字 配色 


良好 的 网 页 文字 配色 有 如 下 几 个 特点 。 

名 ”通过 网 页 主 色 调 决定 文字 颜色 : 思考 并 解读 如 暖 、 寒 、 华 丽 、 朴 实感 所 代表 的 色调 意义 ， 依 照 
网 页 的 主 色调 选择 一 种 主要 的 颜色 。 

句 ”确定 文字 在 网 页 中 应 用 的 位 置 : 思考 主要 颜色 应 用 在 网 页 中 的 哪些 位 置 比较 合适 ， 以 营造 出 最 
佳 的 视觉 效果 。 再 选择 第 二 、 第 三 的 辅助 色彩 。 

句 ”思考 文字 在 网 页 中 的 布局 和 对 比 关系 : 在 选择 辅助 色彩 时 ， 需 要 注意 颜色 的 明暗 、 对 比 、 均 衡 关 
系 ， 同 时 在 与 主 色调 搭配 使 用 时 ， 需 要 考虑 其 面积 大 小 的 分 配 ， 如 图 3-7 所 示 。 

名 ”适当 使 用 配色 工具 : 在 配色 过 程 中 ， 最 好 能 思考 色彩 间 的 关系 ， 同 时 使 用 色 盘 作为 对 照 工具 ， 
依照 个 人 美感 与 经 验 进 行 微调 。 


可 
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Ns | 该 网 页 主 色 为 黄色 ， 
ET 
V9 ， 使 用 深蓝 色 作为 辅 色 ，， 
| 起 到 对 整体 页 面 主要 ， 


BESTSEITERS 


本 内 容 进 行 衬托 的 效果 ， | 


Race 二 ， 明暗 对 比较 强 ， 文 字 ， 
ae ， 色 使 用 与 辅 色相 同 的 ， 
琶 泛 A : 


文字 不 仅 可 以 快速 而 明确 地 传达 设计 者 的 意图 和 各 种 信息 ， 还 对 版 面 美观 度 有 
着 至 关 重 要 的 作用 ， 尤 其 是 一 些 标题 文字 ， 如 果 能 够 巧妙 合理 地 进行 编排 ， 并 选用 
正确 的 颜色 ， 可 以 大 幅 提升 页 面 的 艺术 性 和 美观 度 。 


| ”案例 类 型 ;演艺 团体 售票 网 页 设计 


句 设计 分 析 

@ 整体 结构 简单 ， 灰 色 的 背景 给 人 以 优雅 、 高 贵 的 感觉 ， 卡 其 色 的 文字 给 人 以 低调 、 奢 华 的 感 
觉 ， 整 体 看 上 去 有 些 神秘 感 。 

@ 酒 红色 的 点 缀 成 为 整个 页 面 的 视觉 中 心 ， 具 有 成 熟 的 女性 特色 ， 给 人 以 富丽 、 充 实 的 色彩 印 
象 ， 整 个 网 页 使 用 有 彩色 和 无 彩色 进行 搭配 ， 颜 色 只 有 两 种 ， 富 有 简约 风范 和 艺术 气息 。 
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9 绘制 步骤 


ER metb 王 4 


;配色 评价 ; 配色 评价 : : 
| 青绿 色 隐 合 着 青色 的 清秀 ， 给 人 生机 枯 然 的 力量 感 ， 同 时 ; 蔚蓝 色 文字 的 点 级 面积 虽 小 ， 但 在 整个 页 面 中 却 成 为 唯一 能 ; 

也 具有 隐秘 和 藏匿 的 感觉 ， 一 些 蓝 色 又 能 引 人 沉 思 。 ;抚慰 人 心灵 的 元 素 , 黑色 和 繁 色 将 整个 页 面 泻 染 得 过 于 沉重 、 
; @ 措 配 温和 的 卡其 色 ， 给 人 以 坚定 的 感觉 ， 同 时 具有 奢华 的 ; 神秘 ， 显 得 忧虑 过 重 ， 有 一 种 濒危 的 视觉 感受 ， 让 人 产生 距 ; 
;氛围 。 :高 感 ， 不 愿 亲近 。 | 
| @ 灰色 的 青 景 与 两 种 颜色 拱 配 略 显 忧 孝 ， 使 思 结 越 加 沉静 。 


句 ”相同 风格 应 用 于 其 他 网 页 


作 人 入 命 目次 地 4 


3 


;应 用 于 快餐 网 页 | 应 用 于 购物 网 页 : 
| 知名 快 父 品 牌 使 用 众人 热 知 的 产品 图 片 ， 直 截 了 当 ， 表 达 | 知名 品牌 的 购物 网 页 ， 用 简单 、 幽 默 的 风格 直接 表现 它 的 
| 明确 。 客户 群体 和 接纳 范围 


网 页 中 图 片 的 使 用 2 


图 片 是 网 页 中 最 重要 的 元 素 之 一 ， 图 片 的 整体 色调 和 精美 程度 会 直接 影响 网 页 的 美观 度 。 网 页 
中 的 图 片 主要 分 为 焦点 图 和 配 图 。 


网 页 的 焦点 图 @ 


网 页 的 焦点 图 是 媒体 宣传 过 程 中 的 一 种 重要 的 推广 方式 ， 企 业 在 网 页 首页 版 面 添加 带 有 自己 企 
业 Logo 和 产品 介绍 的 图 片 ， 用 户 可 以 通过 单 击 这 些 图 片 转 到 相应 的 页 面 ， 了 解 并 购买 该 企业 的 产品 ， 


如 图 3-8 所 示 。 
为 了 能 够 抓 住 浏览 者 的 注意 力 ， 引 导 浏览 并 产生 转化 率 ,网 页 焦点 图 的 用 色 不 一 定 要 非常 艳丽 ， 
但 一 定 要 清晰 简单 ， 主 题 明 确 ， 精 致 美观 。 


简洁 有 效 的 产品 和 活动 叙述 也 是 非常 必要 的 。 为 了 提升 图 像 的 美观 度 ， 应 该 将 叙述 文字 提升 到 图 像 
的 高 度 进行 设计 ， 如 图 3-9 所 示 。 
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Your recipe is at a click away. choose your favorite recipe and cooking with iCOOK. 
Enjoy flavors with iCOOK. 


| 是 题目 为 “国内 巡游 季 ” 的 风 ， ， 该 网 页 中 背景 与 文字 使 用 简单 的 黑 自 搭配 ， 
| 景 图 片 ， etl ”色彩 名 格 的 美食 图 片 为 整个 页 面 带 来 了 格 | 
| 明显 的 促销 广告 语 | ， 丽 的 效果 ， 引 起 浏览 者 的 食 从 

图 3-8 图 3-9 


如 何 使 用 网 页 配 图 Cy 


网 页 中 的 配 图 是 指 面积 比较 小 的 产品 图 或 者 其 他 一 些 装饰 性 的 图 像 和 图 形 ， 如 图 3-10 所 示 。 
图 片 是 网 页 中 重要 的 元 素 ， 如 果 图 片 的 使 用 不 当 ， 那 么 网 页 将 会 完全 失去 吸引 浏览 者 的 机 会 。 网 页 
中 的 配 图 应 该 尽量 符合 以 下 条 件 。 

内 容 简单 ， 页 面 主题 明确 ， 背 景 不 宜 杂 乱 。 

加 ”色调 明亮 ， 色 彩 艳 丽 。 

句 ”要 有 适当 的 留 白 ， 这 很 重要 。 

名 ”大 体 色调 要 与 页 面 整体 色调 协调 一 致 。 

名 ”尽量 使 用 精美 清晰 的 图 片 ， 这 会 提升 页 面 的 品质 感 。 


有 | 很 多 时 装 类 网 页 为 所 | 

< fn ， 有 产品 图 片 使 用 相同 ， 
| 二 ， 颜色 背景 的 极 简 风 格 ， | 

= pe 本 这 种 风格 使 页 面 整体 ， 


， 显示 效果 协调 一 致 ， | 
区 ， 能 为 浏览 者 带 来 极 佳 | 
， 的 视觉 体验 。 | 


网 页 中 的 线条 与 图 形 5 


合理 地 在 网 页 中 使 用 线条 和 图 形 ， 不 仅 可 以 大 大 增加 页 面 的 趣味 性 和 艺术 感 ， 还 可 以 大 幅 降低 
页 面 加 载 时 间 ， 提 升 浏览 者 的 体验 。 


在 网 页 中 使 用 线条 © 


在 设计 和 制作 网 页 时 ， 可 以 有 选择 地 使 用 一 些 线条 ， 或 者 将 文字 进行 一 些 特殊 的 处 理 ， 使 之 呈 
现 曲 线 或 直线 的 形状 ， 这 些 线条 会 与 版 面 中 的 其 他 元 素 一 同 构成 总 体 的 艺术 效果 。 必 须要 合理 地 将 
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线条 的 动态 走势 、 颜 色 搭配 与 整体 效果 相 匹 配 ， 才 能 增加 页 面 的 魅力 ， 如 图 3-11 所 示 。 


也 
2) 9Z) Braden 
Leed | 彩 ， 放 置 了 曲线 和 直线 | 


SE CE. 线条 ， 并 将 文字 进行 特 | 


， 殊 的 处 理 ， 使 之 呈现 曲 | 
| 线 的 效果 ， 使 整个 页 面 | 


富有 魅力 。 
SOMETIMES OUR DATA ON WITH FEEDSTITCN, NOW IT'S UsEYOURNEWFEDNYWHERE 国 国 ，， . 
THEINTERMET FEELS LIKE A SUPER EASY TO GRAB ALL YOUR D A 
JUMBLE OF LOOSELY RELATED RELATED FEEDS AND GIVE 
COMNECTIONS & STRANDS, THEM A COMMON PURPOSE 6E7 STARTED | 
图 3-11 


线条 分 为 直线 和 曲线 ， 不 同 的 线条 会 传达 出 不 同 的 效果 和 感受 ， 应 该 有 选择 地 使 用 。 直 线 能 够 
表现 出 流畅 、 整 齐 、 规 则 、 挺 拔 和 轮廓 分 明 的 感觉 。 直 线 的 重复 排列 可 以 强化 科学 严 说、 井井有条 
和 泾 渭 分 明 的 视觉 效果 ， 多 用 于 比较 庄重 、 严 谨 、 科 学 和 理性 的 页 面 题材 ， 如 图 3-12 所 示 。 
曲线 能 够 传达 出 灵活 、 流动 、 活跃 和 顺畅 的 动态 感 。 曲 线 在 页 面 上 的 重复 使 用 可 以 强化 富有 活力 、 
流畅 、 轻 快活 泼 、 无 拘 无 束 的 视觉 感受 。 一 些 青春 、 活 泼 和 张扬 个 性 的 页 面 题材 比较 适合 添加 曲线 ， 
如 图 3-13 所 示 。 
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该 网 页 中 使 用 纵横 交错 的 线条 作为 装饰 。 ， 1 该 网 页 在 色相 和 明暗 上 对 比 强烈， 


| 将 页 面 分 割 成 几 部 分 ， 增 加 页 面 的 空间 感 。 呈现 出 活跃 的 气氛 ， 曲 线形 状 的 加 | 
| 线条 采用 了 虚线 ， 使 整个 页 面 轻松 活泼 ， 与 入 强 有 力 地 增加 了 页 面 的 灵活 与 动 ， 
， 红 色 、 郴 黄色 相 搭 配 ， 质 感 十 足 。 感 ， 使 整个 页 面 富有 活力 。 

3 图 3 


<E 在 网 页 中 使 用 形状 年 


图 形 和 图 像 都 是 图 片 。 与 图 像 的 刻画 细节 不 同 ， 图形 更 注重 “ 形 ”, 通过 大 幅度 抽象 和 高 度 概括 ， 
将 复杂 的 物体 通过 简单 的 线条 和 填充 重新 塑造 为 简单 的 图 形 。 

形状 大 致 可 以 分 为 直线 段 构成 的 多 边 形 ， 以 及 由 曲线 构成 的 各 种 弧 形 ， 它 们 所 传达 的 视觉 感受 
也 和 直线 、 曲 线 类 似 。 平 直 规则 的 多 边 形 往往 传达 出 规矩 严谨 的 感觉 ， 弧 形 则 传递 出 灵动 有 活力 的 
感觉 ， 如 图 3-14 所 示 。 
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该 网 页 整体 由 各 种 形状 构 | 
成 ， 既 包括 简单 的 多 边 形 ， | 
也 包括 曲线 构成 的 各 种 弧 ， 
形 ， 各 种 元 素 构 建成 灵活 有 | 
趣 的 插画 ， 且 插画 外 的 文字 | 
与 图 形 排版 也 十 分 精致, 使 ， 
整个 页 面 简洁 、 大 方 且 极 具 | 
| 个 性 。 


图 3-14 


[3.5 网 页 元 素 的 色彩 搭配 be 


网 页 中 的 几 个 关键 要 素 ， 如 网 页 Logo 与 网 页 广告 、 导 航 菜单 、 背 景 与 文字 ， 以 及 链接 文字 的 颜 
色 应 该 如 何 协调 ， 是 网 页 配色 时 需要 认真 考虑 的 问题 。 


本 本 | 00 


Logo 和 网 页 广告 是 宣传 网 页 最 重要 的 工具 ， 所 以 这 两 部 分 一 定 要 在 页 面 上 脱颖而出 。 怎 样 做 到 
这 一 点 呢 ? 可 以 将 Logo 和 广告 做 得 像 象 形 文字 ， 并 从 色彩 方面 与 网 页 的 主题 色 分 离开 来 。 有 时 候 为 
了 更 加 突出 ， 也 可 以 使 用 与 主题 色相 反 的 颜色 。 如 图 3-15 所 示 为 Logo 和 广告 相 搭配 的 网 页 。 


CAFEkeyf 四 

Uo ,该 网 页 使 用 咖啡 色 作为 主 | 
| 色 ， 黄 色 作为 辅 色 ， 红 色 ， 
的 Logo 在 整个 页 面 中 清晰 ， 
可 见 ， 黄 色 的 文字 和 装饰 ， 
图 形 与 底部 页 面 颜色 相 图 | 
应 。 整 个 页 面 内 容 高 度 女 
， 合 ， 主 体 清晰 可 见 
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网 页 导航 是 网 页 设计 中 重要 的 视觉 元 素 ， 它 的 主要 功能 是 更 好 地 帮助 用 户 访问 网 页 内 容 。 一 个 
优秀 的 网 页 导航 ， 应 该 立足 于 用 户 的 角度 去 进行 设计 ， 导 航 设计 的 合理 与 否 将 直接 影响 到 用 户 使 用 
时 的 舒适 与 否 ， 在 不 同 的 网 页 中 使 用 不 同 的 导航 形式 ， 既 要 注重 突出 表现 导航 ， 又 要 注重 整个 页 面 
的 协调 性 。 
导航 菜单 是 网 页 的 指 路 灯 ， 浏 览 者 要 在 网 页 间 跳 转 ， 要 了 解 网 页 的 结构 和 内 容 ， 都 必须 通过 导 
航 或 页 面 中 的 一 些小 标题 。 所 以 网 页 导航 可 以 使 用 稍微 具有 跳跃 性 的 色彩 ， 吸 引 浏 览 者 的 视线 ， 让 
浏览 者 感觉 网 页 结构 清晰 明了 ， 层 次 分 明 ， 如 图 3-16 和 图 3-17 所 示 。 
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| 该 网 页 中 的 导航 使 用 与 主 色 一 致 的 色彩 ， 使 整体 页 ， | 该 网 页 具有 层次 分 明 的 空间 感 , 同时 极 富 艺术 气息 ， 
， 面 协调 ， 灵 本 形象 的 表达 形式 使 导航 在 页 面 中 陪 颖 。 格调 高 牙 ， 导 航 的 设计 精致 且 清晰 明 了 ， 使 用 了 对 ， 
而 出 ， 极 富 趣味 性 。 | ， 比 强烈 的 颜色 吸引 视线 。 


背景 与 文字 的 搭配 


如 果 一 个 网 页 使 用 了 背景 颜色 ， 必 须要 考虑 到 背景 用 色 与 前 景 文字 的 搭配 问题 。 一 般 的 网 页 侧 
重 的 是 文字 ， 所 以 背景 可 以 选择 纯度 或 明度 较 低 的 色彩 ， 文 字 用 较为 突出 的 亮色 ， 让 人 一 目 了 然 。 


突出 背景 文字 》 


有 时 为 了 让 浏览 者 对 网 页 留 有 深刻 的 印象 ， 设 计 师 会 在 背景 上 做 文章 。 例 如 一 个 空白 页 的 某 
个 部 分 使 用 了 大 块 的 亮色 ， 给 人 识 然 开朗 的 感觉 。 为 了 吸引 浏览 者 的 视线 ， 突 出 的 是 背景 ， 所 以 文 
章 就 要 显得 暗 一 些 ， 这 样 才能 与 背景 区 分 开 来 ， 以 便 浏 览 者 阅读 ， 如 图 3-18 所 示 。 


SE A ,该 网 页 的 背景 与 文字 结 | 
| 合 得 十 分 生动 ， 使 用 了 | 
， 浅 灰色 的 背景 ， 深 灰色 、 

， 浅 蓝 色 及 深蓝 色 作为 文 ， 
， 字 色 ， 灵 活 且 协 调 ， 给 浏 ， 
， 览 者 以 深刻 的 印象 


Welcome to Blue Hat Desgn 


2. 艺术 性 网 页 文字 


艺术 性 的 网 页 文字 设计 可 以 更 加 充分 地 利用 这 一 优势 ， 以 个 性 鲜明 的 文字 色彩 ， 突 出 体现 网 页 
的 整体 设计 风格 ， 或 清淡 高 雅 ， 或 原始 古 拙 ， 或 前 卫 现 代 ， 或 宁静 悠远 。 总 之 ， 只 要 把 握 住 文字 的 
色彩 和 网 页 的 整体 基调 ， 风 格 相 一 致 ， 局 部 中 有 对 比 ， 对 比 中 又 不 失 协 调 ， 就 能 够 自由 地 表达 出 不 
网 页 的 个 性 特点 ， 如 图 3-19 所 示 。 


可 


| 该 网 页 中 的 文字 使 用 ， 
| 了 艺术 变形 处 理 , 与 ， 
| 形状 相 结 合 ， 形 象 地 ， 
| 突出 页 面 主题 。 
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图 3-19 
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3. 链接 文字 》 


一 个 网 页 不 可 能 只 是 单一 的 网 页 ， 文 字 与 图 片 的 链接 也 是 网 页 中 不 可 缺少 的 一 部 分 。 现 代 人 的 
生活 节奏 相当 快 ， 不 可 能 浪费 太 多 的 时 间 去 寻找 网 页 的 链接 。 因 此 ， 要 设置 独特 的 链接 颜色 ， 让 人 
感受 到 它 的 与 众 不 同 ， 自 然而 然 去 单 击 鼠 标 ， 如 图 3-20 和 图 3-21 所 示 。 

这 里 特别 指出 文字 链接 ， 因 为 文字 链接 区 别 于 叙述 性 的 文字 ， 所 以 文字 链接 的 颜色 不 能 和 其 他 
文字 的 颜色 一 样 。 


中 


Cn Fo 
ORIGINAL ， 使 用 矩形 线 框 作为 ， 
zt < 引信 注意 的 方式 ， ， 
| 以 幽灵 按钮 的 形式 | 
， 被 放置 在 页 面 的 中 ， 
， 间 位 置 。 
LIMITED EDITION COLLECTION 
图 3-20 

MLWAYS BE We | 
ORIGINAL | 当 光标 移动 到 链接 ， 
， 文字 处 时 ， 和 矩形 框 ， 
Ey 本 变 成 白色 填充 的 矩 ， 
| 形 ， 文 字 颜 色 变 成 ， 

,黑色 。 
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图 3-21 
突出 网 页 中 链接 文字 的 方法 主要 有 两 种 , 一 种 是 当 光 标 移 至 链接 文字 上 时 , 链接 文字 将 改变 颜色 ; 
另 一 种 是 当 光标 移 至 链接 文字 上 时 ， 链 接 文字 的 背景 颜色 发 生 改 变 ， 从 而 突出 显示 链接 文字 。 


友 配 色 案 例 06: 快餐 订餐 网 页 配色 【WD) 


黄色 有 着 十 分 强大 的 跳跃 感 ， 可 以 轻易 地 引起 人 们 的 注意 ， 整 个 网 页 使 用 2~3 
种 对 比 度 强 的 颜色 ， 可 以 非常 直接 地 体现 主题 和 内 容 ， 给 人 以 迅速 有 效 的 印象 。 


案例 背景 
! 部 黑色 和 大 面积 的 白色 搭配 ， 页 面 对 比 强烈 。 加 入 明 


黄色 ， 增 加 食物 口感 的 同时 也 增加 了 休闲 感 


句 ”设计 分 析 
GD 网 页 使 用 从 左 至 右 三 栏 布 局 的 方式 ， 使 用 不 同 的 颜色 帮助 区 分 ， 结 构 简单 ， 使 人 一 目 了 然 。 
@ 无 论 是 主题 还 是 广告 都 表达 得 简单 明确 ， 整 体 页 面 简洁 、 大 方 ， 对 比 鲜明 ， 给 人 以 明快 、 方 


+ 绘制 图 标 ， 插 入 文字 和 形状 


mymY 


#00aa72 #fff463 


加 Ke RE 


名 ”延伸 方案 
可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


Eh 


2 A eM 


.部 


[全 与 
3 


;应 用 于 汽车 轮胎 网 页 : ! 应 用 于 俱乐部 活动 网 页 
1GD 明亮 的 鲜 黄 色 本 身 就 有 运动 的 感觉 ， 与 沉静 、 安 稳 的 黑色 | 四 绿色 和 黄色 虽然 为 邻近 色 ， 但 艳丽 程度 和 冷暖 对 比 鲜明 ， 


| 和 深 灰 色 措 配 ， 给 人 活力 四 射 又 安全 可 靠 的 印象 。 | 。 加 上 明暗 对 比 的 处 理 ， 给 人 视觉 舒适 的 明快 感 
| @ 在 黑色 背景 上 使 用 白色 文字 ， 鲜 明 的 对 比 可 以 提高 浏览 者 ; @ 层次 分 明 ， 黄 色 和 白色 应 用 灵活 ， 红 色 面积 虽然 不 大 ， 但 
| 的 注意 力 ， 不 会 使 文字 内 容 被 突出 的 黄色 所 淹没 。 ;也 很 突出 ， 给 人 以 健康 、 活 路 又 不 失 激 情 浪 
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色彩 的 搭配 方式 有 很 多 种 。 人 们 由 于 行业 、 性 别 、 年 龄 不 同 ， 而 对 色彩 的 喜好 也 不 相同 。 设 计 师 要 
根据 不 同 的 目标 用 户 ， 设 计 出 符合 他 们 喜好 的 配色 方案 。 这 往往 是 网 页 成 功 的 一 个 重要 因素 ， 本 章 将 
针对 网 页 配色 的 选择 标准 进行 讲解 。 


根据 行业 选择 配色 


每 个 行业 都 有 其 适合 的 代表 性 颜色 ， 例 如 看 到 医院 就 自然 联想 到 白色 和 绿色 ， 看 到 邮局 就 联想 
到 绿色 ， 看 到 化 妆 品 就 马上 联系 到 粉红 色 和 紫色 。 设 计 师 如 果 将 颜色 应 用 到 对 应 的 网 页 上 ， 那 就 能 
更 快 地 建立 品牌 形象 。 如 表 4-1 所 示 为 不 同行 业 的 代表 色 系 。 


表 4-1 不 同行 业 的 代表 色 系 


色 系 
红色 系 ”| 餐饮 行业 、 服 装 百货 、 服 务 行业 、 数 码 家 电 、 
橙色 系 ”| 娱乐 行业 、 和 餐饮 行业 、 建 筑 行业 、 服 装 百货 、 
黄色 系 ”| 儿童 、 餐 饮 行业 、 房 产 家 居 、 楼 盘 、 饮 食 营 
绿色 系 ”| 教育 培训 、 水 果蔬 菜 、 工 业 设计 、 印 刷 出 版 、 交 医疗 保健 、 环 境 保护 、 音 乐 、 园 林 、 农 业 
运输 业 、 水 族 馆 、 渔 业 、 观 光 业 、 加 油 站 、 传 播 、 航 空 、 进 出 口 贸易 、 药 品 、 化 工 、 体 育 用品 、 航 海 、 水 利 、 
导游 、 旅 游 业 、 冷 饮 、 海 产 、 冷 式 业 、 游 览 公司 、 休 闲 业 、 演 艺 事业 

紫色 系 ”| 女性 用 品 、 化 妆 品 、 美 容 保养 、 爱 情 婚姻 、 社 区 论坛 、 奢 侈 品 

粉红 色 系 ”| 女性 用 品 、 化 妆 品 、 美 容 保养 、 爱 情 婚 姻 

棕色 系 ”| 电子 杂志 、 博 客 日 记 、 建 筑 装 潢 、 工 业 设计 、 企 业 顾 问 、 宠 物 玩 具 、 运 输 交 通 、 律 ! 
黑色 系 ”| 宇宙 电影 动画 、 艺 术 、 时 尚 、 赛 车 跑车 、 摄 影 

白色 系 ”| 财经 证 券 、 金 融 保险 、 银 行 、 电 子 机 械 、 医 疗 保健 、 电 子 商务 、 公 司 企业 、 自 然 科 学 、 生 物 科技 


在 选 定 网 页 配色 的 时 候 ， 除 了 要 以 主观 意识 作为 基础 的 出 发 点 ， 还 需要 辅 以 客观 的 分 析 方法 ， 
如 市 场 调查 或 消费 者 调查 ， 在 确定 颜色 之 后 ， 还 要 结合 色彩 的 基本 要 素 ， 加 以 规划 ， 以 便 更 好 地 应 
用 到 设计 中 ， 如 图 4-1 所 示 。 


蓝 色 系 


Doipad Do: ee ; 
本 ， 该 网 页 是 非常 知名 的 一 家 美食 菜 ， 

Pe 0 ， 谱 网 页 ， 使 用 淡 黄 色 、 蜂 蜜 色 作 ， 

, : 时 篇 1 ”为 主 色 和 辅 色 ， 总 体 上 给 人 以 清 ， 
.BS 所 淡 条 和 的 感觉， 姑 艳 的 粉色 和 淡 ， 

: Et ,黄色 符合 主要 浏览 群体 女性 的 心 ， 
| tere - | 理 感受 ， 作 为 苹果 绿 点 缓 色 的 加 | 

` 辐 Be 入 给 人 新 鲜 、 屋 意 的 感受 。 : 
和 


根据 浏览 者 偏好 选择 颜色 。 ”5 | 


设计 者 如 果 想 在 网 页 中 恰当 地 使 用 色彩 ， 就 要 从 多 个 方面 考虑 色彩 的 实用 性 。 首 先 ， 在 设计 网 
页 之 前 必须 要 确定 目标 群体 ， 即 网 页 的 浏览 者 , 对 浏览 者 有 一 些 基本 的 了 解 ， 如 年 龄 段 、 生 活 形态 等 ， 
根据 其 特性 找 出 目标 群体 对 色彩 的 喜好 以 及 可 运用 的 素材 ， 做 好 充分 的 选择 ， 这 对 网 页 设计 者 来 说 
是 十 分 有 帮助 的 ， 如 图 4-2 所 示 。 


， 该 网 页 是 一 家 女性 购物 网 页 ， | 
， 主 要 出 售 珠宝 、 护 肤 品 和 香水 ， 
等 高 端 产品 ， 页 面 采用 紫色 作 | 
为 主 色 ， 体 现 出 端庄 的 格调 


一 一 Flat| Qor = 


WE ， 与 温暖 的 橙色 搭配 演绎 出 奢华 | 
人 ,的 特质 ， 整 体 轮 订 分 明 ， 结 构 ， 
| 简单 ， 明 相 而 舒展 。 | 
OFFERS 
图 4-2 


ee 根据 性 别 选择 颜色 © 


在 同样 的 目标 群体 中 ， 也 会 因 职业 、 年 龄 和 生活 环境 等 因素 的 不 同 而 对 颜色 的 偏爱 有 所 不 同 ， 
或 是 因 国家 、 民 族 的 不 同 而 有 所 差异 。 

同样 的 颜色 ， 在 不 同 的 时 代 或 流行 的 趋势 下 ， 浏 览 者 也 会 对 其 产生 不 同 的 观感 ， 例 如 在 过 去 ， 
大 多 数 人 不 喜欢 黑色 , 认为 它 是 不 吉利 、 暗 沉 的 象征 , 只 有 丧事 才 会 使 用 , 但 是 随 着 时 代 的 发 展 和 变化 ， 
黑色 已 经 成 为 高 雅 、 品 质 的 象征 ， 如 图 4-3 所 示 。 


MANKIND 


， 随 着 时 代 的 发 展 ， 护 肤 品 和 保养 ， 
| 品 已 经 不 是 女性 的 专属 ， 该 网 页 ， 
， 是 英国 一 家 著名 的 男性 时 尚 生活 ， 
， 购物 网 页 ， 使 用 黑色 和 灰色 作为 氏 


， 主 色 和 辅 色 ， 茶 色 作为 点 级 色 ， Aesop. 用 “AA 卡 
| 体现 出 绅士 般 的 高 贵 品质 以 及 给 ， A 
， 人 以 奢华 的 印象 。 | EE a 
a pe 有 rr 
ee 
SHOF NOW |: - WY™ 如 


图 4-3 


国 第 4 章 网 页 配色 的 夺标 
根据 年 龄 阶段 选择 颜色 ( 


不 同年 龄 阶段 的 人 对 颜色 的 喜好 有 所 不 同 , 例如 老人 通常 偏爱 灰色 、 棕 色 等 , 儿童 通常 喜爱 红色 、 
黄色 等 ， 如 图 4-4 和 图 4-5 所 示 。 


Grace 围 


Homecare 


| 这 是 提供 健康 医疗 保健 服务 的 网 页 ， 页 面 中 不 同 层 ，  ， 该 网 页 整体 使 用 红色 和 黄色 搭配， 给 人 欢快 、 恰 悦 | 
， 次 的 灰色 既 体现 了 黑色 的 坚毅 ， 又 呈现 出 自 色 的 ， 和 兴奋 感 ， 深 灰色 和 蓝 色 为 整体 添加 了 一 些 品质 和 | 
| 洁净， 搭配 较 浅 的 孔雀 蓝 ， 给 人 一 种 沉着 、 冷风 的 | 层次， 体现 出 品牌 的 高 端 和 优质 感 。 

| 印象 同时 不 失 高 雅 和 尊贵 。 | | 


六 配色 案例 07: 花 店 网 页 配色 


杏 黄色 ， 从 字面 意义 上 理解 ， 就 是 杏子 的 颜色 。 它 有 着 孩子 般 天 真 烂漫 、 纯 洁 
无 邪 的 特性 ， 让 人 不 由 得 平心静气 ， 产 生 一 种 舒适 的 感觉 


flower 页 ! 支付 方式 ”1 公司 服务 


守信 息 Hh 


更 人 要 方 二 可 得 攻 间 术 条 。。 区 的 本 记 
1 只 厅 旺 着 交流 第 扩 和 二 天 天宇 下 的 

美的 要 情人 全 。。。 友和 谋生 开店。 区 五 着 多 全 的 吉 
生 让 全 天 罗 心 一生 只 夫人 下 硬 (，。 再 下 人 地 的 本 和 
3 3 


加 设计 分 析 

@ 该 页 面 中 运用 的 色彩 比较 多 ， 但 经 过 合理 排版 ， 丰 富 的 色彩 为 页 面 营造 出 华丽 的 气氛 ， 同 时 
又 不 会 显得 杂乱 无 章 。 

@ 整个 页 面 使 用 可 黄色 作为 背景 ， 体 现 出 明快 氛围 的 同时 ， 给 人 以 清新 、 愉 快 的 感觉 。 用 散发 
着 陈旧 气息 的 褐 红色 图 片 作为 主 色 ， 营 造 了 一 种 经 典 而 又 浪漫 的 气氛 。 

@ 页 面 上 下 有 两 个 绿色 的 Logo 图 片 ， 虽 然 颜色 比 主体 颜色 还 要 突出 ， 却 也 散发 出 令 人 向 往 的 
田园 风味 ， 同 时 活跃 了 整个 页 面 的 气氛 。 深 灰色 文字 在 突出 主题 的 同时 ， 增 加 了 颜色 的 质感 ， 营 造 
出 一 种 质朴 的 氛围 。 

自 绘制 步骤 
第 1 步 : 填充 渐变 背景 。 


1 公 风 服务。 | 产 吕 内 笨 。 | 问 友 鲜 价 


> 4s nvr: 


名 ”延伸 方案 


-可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


Pn 
公司 最 务 ”| ”产品 内 条 | 网友 评价 


! 配色 评价 : ! 配色 评价 : 
! 可 以 将 朴素 的 黄色 换 为 娇嫩 柔美 的 粉红 色 ， 这 种 颜色 比 黄色 ; 西瓜 红 是 一 种 成 熟 了 的 西瓜 果肉 的 颜色 ， 属 于 暖色 系 ， 颜 色 
; 更 能 代表 鲜花 ， 更 能 构建 娇 美的 形象 。 ; 非常 明亮 ， 给 人 一 种 柔和 的 感觉 。 但 是 用 在 此 处 ， 与 作为 标 ; 


应 用 于 水 果 销 售 网 页 
人 以 杏 黄色 作为 整个 网 页 的 背景 色 ， 与 明度 较 高 的 浅黄 色 进 
行 调和 ， 页 面 非常 融洽 而 不 显 单调 ， 很 好 地 突出 了 主题 图 ! 。 感受 。 
片 ， 与 主题 图 片 色调 也 是 相近 的 , 故 不 会 有 明显 的 突 元 感 。! (@) 以 视觉 刺激 耀眼 而 强烈 的 橙色 作为 主 色 ， 与 明度 纯度 较 低 
@ 以 浅 色 为 铺垫, 搭配 深 色 的 文字 , 其 范围 小 但 分 布 较 分 散 , ! ”的 可 黄色 背景 形成 鲜明 的 对 比 ， 突 出 了 主题 。 
达到 一 种 突出 而 不 突 元 的 视觉 效果 ， 赋 予 了 网 页 生命 力 。 将 明度 较 低 的 深 棕色 作为 辅 色 ， 按 同色 系 不 同 明度 和 纯度 ; 
@ 页 面 顶部 的 小 块 深 红色 作为 辅 色 ， 与 下 半 部 分 的 文字 相 呼 ;的 变化 分 布 于 整个 页 面 的 上 、 中 、 下 ， 形 成 了 一 个 稳定 的 ; 
应 ， 达 到 统一 页 面 的 效果 ， 使 整个 页 面 看 起 来 不 会 显得 头 ， | 
! ” 重 脚 轻 。 ! “个 页 面 增加 了 活跃 的 气氛 。 | 
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根据 季节 选择 颜色 p 
人 类 会 因为 明亮 的 光线 而 感受 到 活力 ， 就 像 植 物 沐浴 在 阳光 中 成 长 一 样 ， 只 要 是 生物 ， 对 光 都 
会 有 敏感 性 ， 离 开光 就 无 法 生存 。 大 自然 可 以 分 为 四 季 ， 从 某 种 意义 上 讲 ， 人 类 也 可 以 被 分 为 四 季 。 
人 体 的 体 色 有 六 大 特征 ， 即 冷 、 暖 、 浓 、 淡 、 鲜 、 浊 。 我 们 把 人 体 的 六 大 特征 和 四 季 的 变化 相 
结合 分 为 春 、 夏 、 秋 、 冬 四 季 。 如 图 4-6 和 图 4-7 所 示 为 根据 季节 选择 的 颜色 搭配 。 


Q 


| 该 网 页 是 位 于 哥伦比亚 的 一 个 | 
| 滑雪 圣地 的 官方 网 页 ， 冬 季 是 | 
| 该 地 区 的 旅游 旺季 ， 网 页 中 使 | 
本 用 棕色 和 浅 茶色 的 搭配 ， 与 主 ， 
| 图 色彩 相 融合 ， 展 现 出 大 自然 | 
| 的 氛围 ， 给 人 以 安定 、 踏 实 和 | 
， 亲切 的 感觉 


图 4-6 


-MG 
AR HAWAIIAN. FLANNNG a ANGUAGES ~ QQ 


ISLANDS 


,该 网 页 是 夏威夷 旅游 的 官方 网 ， 
,页 ,作为 四 季 常 青 的 旅游 胜地 ， 
| 永远 都 是 夏季 的 茂盛 气息 , 大 ， 
,自然 的 将 蓝 色 和 绿色 构成 了 页 ， 
， 面 中 的 主要 部 分 ,彰显 出 豪迈 、 | 
,广阔 、 深 远 的 景象 。 网 页 中 导 | 
| 航 使 用 较 深 的 湖 蓝 色 ， 以 及 白 | 
| 色 的 背景 ， 给 人 以 明亮 、 凉 夹 ， 


女 配 色 案 例 08: 饮料 网 页 配 


稚嫩 的 卡通 、 插 画 或 糖果 色 运用 在 网 页 设计 中 ， 会 让 人 体验 到 童真 的 美好 。 
色调 较为 明亮 的 纯色 既 温和 又 娇艳 ， 给 人 以 柔嫩 、 优 雅 、 可 爱 的 感觉 ， 又 像 儿 时 
收集 的 糖 纸 ， 给 人 以 纯真 、 美 好 的 印象 。 


第 4 章 网 页 配色 的 选择 标准 


人 EE 


@ ”设计 分 析 
Q@ 娇媚 的 玫瑰 粉 像 少女 般 天真 、 纯 洁 ， 娇 柔 而 明艳 ， 给 人 温暖 、 幸 福 的 感觉 很 容易 打动 人 心 。 
@ 蔚蓝 色 、 玫 瑰 粉 和 苹果 绿 都 是 年 轻 、 


的 美好 印象 。 
(9) 3 


纯度 适中 、 明 快 柔 和 的 颜 


色 与 白 


可 爱 的 颜色 ， 给 人 以 轻松 、 自 然 、 健 康 向 上 、 优 美 恬静 


色 搭 配 ， 给 人 以 纯真 、 简 单 、 精 力 充沛 的 印象 ， 生 动 地 


体现 了 纯真 与 浪漫 相 融 合 的 美妙 感觉 ， 非 常 具 有 感染 力 ， 能 够 有 效 吸引 浏览 者 的 兴趣 。 


#7276b1 
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回 ”延伸 方案 


型 4! ! 2 烈 全 | 芭 


刀 全 侣 ol ah ET 


[20s 
| 细 OR 
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: ! 配色 评价 : 
! 将 玫瑰 粉 替换 为 蔚蓝 色 ， 虽 然 少 了 一 些 娇柔 之 美 ， 却 多 了 许 ; 红色 常用 于 食品 中 ， 很 多 时 候 会 与 蓝 色 和 绿色 搭配 ， 给 人 移 | 
! 多 衷 朗 和 透彻 ， 不 失 可 爱 的 同时 体现 了 纯真 、 清 爽 ， 给 人 轻 ! 丽 和 刺激 感 ， 可 以 引起 人 的 食欲 ， 但 是 用 在 此 处 总 会 给 人 一 ! 


| 松 、 舒适 的 感觉 ， 与 白色 搭配 ， 仿 佛 看 到 了 透彻 而 广阔 的 天 ， 的 各 ,压抑 了 糖果 色 搭配 带 给 人 的 活跃 .欢快 的 气氛 。; 
| 空 ， 如 同 从 看 云 关公， 可 以 安抚 人 们 的 心灵 。 | 


名 ”相同 风格 应 用 于 其 他 网 页 


Boppy 12 Days 1 
of Giveaways is 
here 


*ETUDE HOUSE: 二: 


| 应 用 于 彩妆 用 品 网 页 ， | 应 用 于 母 册 用 品 网 页 ， | 
| GD 中 等 亮度 的 明度 和 纯度 总 是 给 人 明艳 动人 的 感受 ， 经 常 被 中 明度 较 高 的 绿色 , 如 春天 的 气息 般 给 人 以 滋长 的 荫 动 印象 
用 在 女性 主题 的 设计 中 ， 页 面 中 丰富 多 彩 的 组 合 ， 灵 动 、} 。 蕴含 着 无 限 的 美好 和 想象 
优美 、 靓 丽 ， 同 时 也 体现 了 产品 多 样 化 的 特点 。 | @ 整个 页 面 对 比 元 素 较 多 ， 但 不 会 给 人 带 来 视觉 上 的 不 适 ，| 
淡雅 的 背景 衬托 出 多 种 色彩 的 丰富 ， 给 人 以 愉悦 的 感受 ，} 。 整个 页 面 呈 现 出 一 种 淡雅 、 清 新 的 感觉 

就 如 同 多 次 多 彩 的 青春 一 般 扣人心弦 。 : - 


根据 商品 销售 阶段 选择 配色 


色彩 堪 称 世界 性 语言 ， 在 市 场 日 趋 成 熟 、 竞 争 品牌 林立 的 大 环境 中 ， 要 使 你 的 品牌 具有 明显 区 
别 于 其 他 品牌 的 视觉 特性 、 更 富有 魅力 、 刺 激 和 指导 消费 者 ， 以 及 增加 消费 者 对 品牌 形象 的 记忆 ， 
色彩 语言 的 运用 极为 重要 。 

色彩 也 是 商品 重要 的 外 部 特征 ， 决 定 着 产品 在 消费 者 脑海 中 是 去 是 留 的 命运 ， 而 色彩 为 产品 创 
造 的 高 附加 值 的 竞争 力 更 为 惊人 。 在 产品 同 质 化 趋势 日 益 加 剧 的 今天 , 如 何 让 你 的 品牌 第 一 时 间 “ 跳 ” 
出 来 ， 快 速 锁定 消费 者 的 目光 ， 色 彩 在 其 中 扮演 着 重要 的 角色 。 


‘要 于 和 商品 的 导入 期 


新 的 商品 刚刚 推 入 市 场 , 还 没有 被 大 多 数 消费 者 所 认 知 , 消费 者 对 新 商品 需要 有 一 个 接受 的 过 程 ， 
如 何 才能 够 强化 消费 者 对 新 商品 的 接受 程度 呢 ? 为 了 加 强 宣传 的 效果 , 增强 消费 者 对 新 商品 的 记忆 ， 
在 新 商品 宣传 网 页 的 设计 中 ， 尽 量 使 用 色彩 艳丽 的 单一 色 系 色调 为 主 ， 以 不 模糊 商品 诉求 为 重点 ， 
如 图 4-8 所 示 。 


NEW 
ORGANIC 
VEGA ONE ee 
， 该 网 页 是 保健 和 营养 新 产品 推 | 
， 广 网 页 。 为 了 加 强 宣传 效果 ， 
， 图 片 背景 使 用 多 层次 的 绿色 ， 
了 4 在 灰色 的 页 面 青 景 中 脱 蜂 而 ， 
Gd ， 出 ， 与 产品 包装 的 主 色调 高 度 ， 
于 | 统一 措 配 自 色 的 文字 显得 格 | 


， 外 突出 。 


Our Price 810.74 Our Price S1639 
Save 49% Save 43% 
Free Snlpping 

图 4-8 


现代 社会 完 如 信息 的 海洋 ， 随 时 都 有 排山倒海 的 信息 济 涌 而 来 ， 消 费 者 置身 其 中 ， 往 往 荡 然 不 
知 所 措 ， 能 让 其 在 瞬间 接受 信息 并 做 出 反应 ， 第 一 是 色彩 ， 第 二 是 图 形 ， 第 三 才 是 文字 。 


”商品 的 拓展 期 0 
经 过 了 前 期 对 商品 的 大 力 宣传 ， 消 费 者 已 经 对 商品 逐渐 熟悉 ， 商 品 也 拥有 了 一 定 的 消费 群体 。 
在 这 个 阶段 ， 不 同 品牌 同 质 化 的 商品 也 开始 慢 慢 增多 ， 无 法 避免 地 产生 竞争 ， 如 何 才能 够 在 同 质 化 
的 商品 中 脱颖而出 呢 ? 这 时 候 商品 宣传 网 页 的 色彩 必须 要 以 比较 鲜明 、 鲜 艳 的 色彩 作为 设计 的 重点 ， 
使 其 与 同 质 化 的 商品 产生 差异 ， 如 图 4-9 所 示 。 
色彩 的 定位 会 突出 商品 的 美感 ， 使 消费 者 从 产品 的 外 观 和 色彩 上 看 出 商品 的 特点 ， 从 色彩 中 产 
生 相应 的 联想 和 感受 ， 从 而 接受 产品 ， 如 图 4-10 所 示 。 


My 


: et 


让 正 处 于 购买 
| 热潮 的 来 临 之 际 ， 使 用 温 敬 雅 到 的 布景 衬托 产 | 
， 品 的 优秀 品质 ， 使 用 鲜嫩 甜美 的 粉色 作为 重点 ， 
， 色 ， 直 观 地 表达 了 该 系列 产品 主要 定位 于 青 少 ， 
， 年 女性 消费 群体 。 | 


， 该 网 页 使 用 蓝 色 作为 主 色 ， 搭 配 粉色 和 绿色 多 种 色 ， 
， 彩 ， 给 人 和 舒适、 轻松 和 精力 充沛 的 感觉 。 与 面 对 的 ， 
， 青 少年 消费 群体 和 产品 风格 一 致 。 红 色 在 页 面 中 明 ， 
， 显 突出 并 给 人 火热 的 感觉 
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区 可 攻 简 品 的 成 熟 期 > 


经 过 不 断 发 展 ， 商 品 在 市 场 中 已 经 占有 一 定 的 市 场地 位 ， 消 费 者 对 该 商品 也 十 分 了 解 了 ， 并 且 
该 商品 拥有 一 定数 量 的 忠实 消费 者 。 在 这 个 阶段 ， 维 护 现 有 顾客 对 该 商品 的 信赖 就 会 变 得 非常 重要 ， 
此 时 在 网 页 设计 中 所 使 用 的 色彩 必须 与 商品 理念 相 吻 合 , 从 而 使 消费 者 更 了 解 商品 理念 , 并 感到 安心 ， 
如 图 4-11 和 图 4-12 所 示 。 


ELEVATE YOUR 


HIGH-SPEED 


asADVENTUBRES. 


SUMMIT 
UNKNOWN 


@ CLEARANCE ©@ NEWARRIVALS 加 RUNBETTER 


| 深蓝 色 本 身 就 会 给 人 一 pp 拱 配 较 ， 
， 亮 的 蓝 色 和 黑色 ， 形 成 班 驱 的 背景 ， 彰 显 出 品质 和 
| 地 位 ， 浅 灰色 和 黑色 的 措 配 更 能 体现 雅致 训 端的 格 的 
， 调 ， 多 种 相 丽 的 色彩 措 配 富有 趣味 性 ， 犹 如 童话 般 ” ， 字 主体 更 加 清晰 明显 ， 深 灰色 提高 了 产品 的 档次 


| 绚丽 多 彩 ， 高 度 迎 合 了 该 品牌 的 产品 理念. 人 


图 4-11 图 4-12 


市 场 是 残酷 的 ， 大 多 数 商品 都 会 经 历 一 个 从 兴盛 到 衰退 的 过 程 ， 随 着 其 他 商品 的 更 新 ， 更 流行 
的 商品 出 现 ， 消 费 者 对 该 商品 不 再 有 新 鲜 感 ， 销 售 量 也 会 出 现下 滑 ， 此 时 商品 就 进入 衰退 期 。 这 时 
要 维持 消费 者 对 商品 的 新 鲜 感 ， 便 是 最 大 的 重点 ， 这 个 阶段 网 页 所 使 用 的 颜色 必须 是 流行 色 或 有 
新 意义 的 独特 色彩 ， 将 网 页 从 色彩 到 结构 做 一 个 整体 的 更 新 ， 重 新 唤 回 消费 者 对 商品 的 兴趣 ， 如 
图 4-13 所 示 。 
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， 搭配， 强烈 地 吸引 了 浏 ， 
| 览 者 的 注意 ， 同 样 引 导 
人 注意 的 是 背景 和 文 
| 字 的 黑白 搭配 ， 同 时 也 ， 
， 对 产品 起 到 了 衬托 的 
| 作用 ， 整 体 非常 直观 且 
| 吸引 注意 力 ， 让 人 感觉 
， 到 张扬 和 力度 。 


| 低 明 度 的 深蓝 色 给 人 以 老练 、 沉 稳 和 安定 的 感觉 ， ， 
| 并且 起 到 了 加 重 红色 产品 的 突出 印象 ， 使 白色 的 文 ， 


图 4-13 


根据 用 户 心理 效应 选择 颜色 5 


设计 者 想 让 制作 出 的 网 页 传达 什么 样 的 形象 , 给 人 什么 样 的 感觉 ,与 色彩 的 选择 有 很 大 的 关系 。 

色彩 有 各 种 各 样 的 心理 效果 和 情感 效果 ， 会 引起 各 种 各 样 的 感受 和 遐想 。 例 如 看 见 绿色 的 时 候 
会 联想 到 树叶 、 草 地 ， 看 到 蓝 色 时 会 联想 到 海洋 、 水 。 无 论 是 看 见 某 种 色彩 或 是 听见 某 种 色彩 名 称 
的 时 候 ， 心 里 都 会 自动 描绘 出 这 种 色彩 带 给 我 们 的 或 喜欢 ， 或 讨厌 ， 或 开心 ， 或 悲伤 的 情绪 ， 如 
图 4-14 所 示 。 


Find Your Perfect Match 
The ARL Is proud 中 annouUEEENSER Dog, a brand new nr graml designedro help you find the 1 i 
"和 .起 | ， 该 网 页 是 为 流浪 宠物 寻找 主人 ， 
人 ， 的 公益 网 页 ， 沉 静 、 理 智 的 深 | 
， 蓝 色 与 灰色 搭配 ， 体 现 出 一 种 ， 
“ - 区 | 忧 部 感 ， 粉 红色 的 多 情 和 自 色 ， 
， 的 纯净 试图 在 整个 页 面 中 唤起 ， 
Welcome to the Animal Rescue League of Berks County | 浏览 者 的 爱心 ， 在 表达 悲伤 的 | 
污 EE : ， 同 时 添加 了 温 志 的 感觉。 


图 4-14 


这 种 对 色彩 的 心理 反应 、 联 想到 的 东西 多 半 与 每 个 人 过 去 的 经 历 、 生 活 环境 、 家 庭 背景 、 性 格 、 
职业 等 有 着 密切 的 关系 ， 虽 然 每 个 人 都 会 有 所 差异 ， 但 在 设计 网 页 时 ， 仍 需要 以 大 多 数 人 的 联想 为 
依据 ， 这 样 可 以 避免 产生 较 大 的 形象 误差 ， 如 图 4-15 所 示 。 
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| 红色 和 绿色 是 很 难 把 握 的 色彩 | 
， 搭配 ， 然 而 这 样 的 搭配 却 有 着 ， 
| 独特 的 美 。 这 是 一 个 种 子 推广 ， 
| 售卖 网 页 ， 大 胆 地 使 用 了 红 和 ， 
| 绿 的 搭配 ， 使 用 渐变 和 黄 绿色 
| 融合 与 衔接 ， 呈 现 了 绿叶 配 红 ， 
， 花 的 淳朴 与 自然 ， 给 人 以 红 香 ， 
， 绿 玉 的 美感 | Freshly Picked: New for 2018 
图 4-15 


| 
红色 是 热血 澎 汰 的 颜色 ， 明 度 较 低 的 暗 红 色 会 增添 几 分 成 熟 感 和 高 端 品 位 ， 与 
灰色 或 黑色 的 无 彩色 系 搭配 ， 降 低 了 一 些 艳 丽 的 感觉 ， 给 人 以 低调 、 奢 华 的 印象 。 


女 配色 案例 09: 汽车 公司 网 页 配色 


| 一 


类型 汽车 展示 网 页 设计 | 


1 


ADATRTE 


回 设计 分 析 
人 中 暗 红 色 是 该 汽车 品牌 的 标志 色 ， 使 用 暗 红 色 作 为 背景 色 中 的 主要 部 分 ， 体 现 出 高 端 、 卓 越 、 
成 熟 、 稳 定 的 特征 , 既 诠释 了 红色 的 激情 与 火热 的 特性 , 又 符合 品牌 传递 的 产品 特征 , 同时 给 人 以 传统 、 
稳定 的 印象 。 
@ 使 用 接近 深 灰 色 的 黑色 作为 背景 ， 与 黑色 相 比 不 会 给 人 过 硬 的 感觉 ， 品 质 中 多 了 些 婉约 的 成 
分 ， 稍 显 柔和 。 与 白色 的 搭配 能 够 提高 浏览 者 对 该 内 容 区 域 的 重点 关注 。 
(@) 在 主 图 中 同时 使 用 暗 红色 作为 点 级 色 , 与 标志 和 背景 高 度 统一 , 体现 了 少 即 是 多 的 设计 理念 ， 
主 图 中 的 浅 灰 色 、 浅 蓝 色 、 查 黄色 等 色彩 ， 在 暗 红色 的 围绕 下 更 加 突出 主体 产品 的 特征 ， 标 题 文 字 
也 用 暗 红色 ， 仍 是 整体 高 度 统一 并 协调 一 致 的 体现 。 
加 ”绘制 步骤 
建 整体 布局 ， 插 入 Logoo 1 主题 
日 : 


Pe 
三 587 


Style. Design. S yl. 


So ktalian, So You 


回 ”延伸 方案 


V 可 延伸 的 配色 方案 


;配色 评 人 2 
;将 暑 红 色 替 换 成 黄 绿色 ， 整 个 页 面 看 起 来 不 再 沉 问 ， 给 人 一 
种 轻松 活 小 的 感觉 。 同 时 小 面积 的 补 色 可 以 让 浏览 者 第 一 眼 ;为 两 部 分 。 诺 部 没有 能 与 项 部 颜色 相对 称 的 颜色 。 所 以 页 面 

看 到 想 要 展示 的 内 容 整体 较 灰 暗 ， 主 是 不 突出 ， 不 能 很 好 地 展示 产品 特性 ， 吸 引 ; 
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@ ”应 用 于 相同 行业 不 同 风格 的 网 页 


A unique 
cabin 


应 用 于 高 端 商务 车 网 页 ; 

中 深 棕色 给 人 以 安全 、 安 定 、 安 心 的 感觉 ， 彰 显 出 踏实 、 稳 
定 ， 在 页 面 中 与 黑色 斜 切 过 渡 ， 增 加 了 神秘 感 和 品质 感 ， 
使 较为 暗淡 的 主 图 显得 绚丽 多 姿 、 光 彩 夺 目 ， 起 到 了 很 好 ， 
的 衬托 作用 。 


| 应 用 于 越野 车 网 页 ， 

;GD 绿色 和 蓝 色 都 是 天 然 的 颜色 ， 体 现 了 大 自然 的 轻快 、 明 朗 
与 豪 远 ， 适 当 降低 颜色 的 明暗 度 ， 会 增加 页 面 的 对 比 度 ， 
显得 更 加 活跃 ， 并 给 人 以 柔和 、 轻 松 的 感觉 

人 @ 下 半 部 分 用 图 片 作为 背景 ， 加 重 强调 产品 特征 ， 使 人 感 
到 自然 的 气息 ， 加 重 产品 特点 的 表现 力 ， 提 醒 浏 览 者 这 是 | @ 使 用 深 亚麻 色 作为 背景 色 ， 给 人 以 低调 、 含 著 的 印象 ， 与 
为 跨越 大 自然 而 生 的 产品 理念。 白色 的 文字 搭配 加 重 了 这 一 印象 ， 不 会 过 于 强烈 和 强硬 ， 

@ 虚 化 背景 有 助 于 产品 的 展示 ， 争 夺 浏 览 者 的 一 些 注意 力 在 | ”具有 和 柔和、 亲切 的 感觉。 
产品 展示 的 范围 ， 加 强 重点 表达 的 内 容 ， 使 用 浅 灰 色 会 增 ; @) 使 用 繁 红色 作为 点 级 色 ， 增 加 了 女性 的 特征 ， 是 为 产品 扩 
加 产品 的 品质 感 ， 使 页 面 较 暗 的 蓝 色 和 绿色 融 为 一 体 ， 增 ; 。 大 消费 群体 市 场 的 手段 ， 红 紫色 在 整 幅 页 面 中 面积 虽 小 ， 
强 整体 页 面 的 协调 感 。 | 。 却 有 着 较 高 的 吸引 浏览 者 目光 的 作用 ， 显 得 优雅 而 别致 


觉 
是 
征 


[5.1 甘 网 页 配色 的 冷暖 2 

冷暖 本 来 是 人 体 皮 肤 对 外 界 温度 高 低 的 感觉 。 太 阳 、 炉 火 、 烧 红 的 铁 块 等 本 身 温度 很 高 ， 它 们 
发 出 的 红 橘 色 光 有 导热 的 功能 ， 光 能 到 的 地 方 ， 可 以 使 空气 、 水 和 其 他 的 物体 温度 升 高 。 人 的 皮肤 
被 这 种 光线 照射 ， 可 以 感觉 到 温暖 。 如 图 5-1 所 示 为 一 款 运 用 了 暖色 搭配 的 网 页 作品 。 


£3 
网 页 通过 表面 色彩 给 人 以 温暖 、 凉爽 , 寒冷 的 感觉 , 一 般 来 说 , 自然 界 的 冷暖 感 是 由 感觉 器 官 触摸 物体 来 感受 的 ， 
但 是 色彩 的 传递 被 赋予 了 不 一 样 的 含义 ， 物 体 借助 色彩 可 以 给 人 不 一 样 的 温度 


大 海 、 天 空 、 雪 地 等 环境 是 蓝 色 光 ， 人 们 在 这 些 地 方 会 感觉 到 比较 冷 ， 如 图 5-2 所 示 为 一 款 运 
用 了 冷色 搭配 的 网 页 作品 。 这 些 生活 经 验 的 积累 ， 使 人 的 视觉 、 触 觉 与 心理 活动 之 间 具 有 一 种 特殊 
的 且 常 常 下 意识 的 联系 。 视 觉 变 成 了 触觉 的 先导 ， 无 论 光源 色 还 是 物体 色 ， 在 生理 上 或 者 心理 上 由 于 
意识 的 惯性 而 引起 相应 的 条 件 反射 。 


红色 和 白色 的 搭配 ， 最 简单 、 最 分 明 又 车 人 该 网 页 中 大 面积 的 蓝 色 给 人 理性 、 冷 静 的 印 
喜爱 。 网 页 中 大 面积 的 红色 给 人 鲜艳 、 热 情 象 ， 蓝 色 的 明暗 度 渐变 和 融合 让 人 联想 到 广 
的 感觉 ， 加 入 白色 的 干 兆 和 纯洁 ， 使 整个 页 阔 的 海洋 , 给 人 有 一 种 清澈、 舒畅 的 视觉 感受 。 


面 看 上 去 简单 、 直接、 无 暇 、 可 爱 。 
图 5-1 图 5-2 
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一 般 大 家 会 认为 红 、 橘 、 黄 是 暖色 调 ， 蓝 、 绿 、 紫 是 冷色 调 ， 其 实 这 是 不 确切 的 ， 在 色彩 体系 
中 颜色 都 有 冷暖 之 分 ， 那 么 怎样 来 划分 呢 ? 众所周知 ， 太 阳光 能 给 人 带 来 温暖 ， 久 而 久之 ， 当 人 们 
看 到 红色 、 橘 色 和 黄色 也 相应 产生 温暖 感 ， 海 水 和 月 光 使 人 感觉 清爽 ， 于 是 人 们 看 到 青色 或 青绿 色 
类 的 颜色 ， 也 相应 会 产生 凉爽 感 。 


色彩 的 温度 感 不 过 是 人 们 的 习惯 反应 ， 是 人 们 长 期 实践 的 结果 ， 人 们 不 能 孤立 判定 色彩 的 冷暖 ， 至 少 要 有 两 种 


颜色 一 起 比较 。 其 实 冷 暖色 调 的 区 别 是 在 对 比 中 产生 的 -种 主观 上 的 感觉 。 而 对 颜色 冷暖 的 判断 是 根据 色彩 的 
意象 特征 来 确定 的 。 冷 暖 即 色 性 ， 这 是 心理 - 生 的 感觉 。 


轻 与 重 的 色彩 感觉 p 


各 种 色彩 给 人 的 轻重 感 不 同 ， 从 色彩 得 到 的 重量 感 是 质感 与 色 感 的 复合 感觉 。 浅 色 密度 小 ， 有 
一 种 向 外 扩散 的 运动 现象 ， 给 人 一 种 质量 轻 的 感觉 ， 深 色 密度 大 ， 给 人 一 种 内 聚 感 ， 从 而 产生 质量 
重 的 感觉 。 

色彩 的 轻重 主要 与 色彩 的 明度 有 关 。 明 度 高 的 色彩 使 人 联想 到 蓝天 、 白 云 、 棉 花 等 ， 产 生 轻 柔 、 
漂浮 、 上升、 敏捷 、 灵 活 等 感觉 , 如 图 5-3 所 示 。 明度 低 的 色彩 使 人 联想 到 钢铁 、 大 理 石 等 , 产生 沉重 、 
稳定 、 降 落 等 感觉 ， 如 图 5-4 所 示 。 


| 网 页 背景 中 明度 较 高 的 蓝 色 和 和 白色 让 人 有 一 | ， 网 页 中 的 大 面积 低 明 度 的 蓝 色 首 先 给 人 的 印 | 


| 种 漂浮 上 升 的 感觉 ， 给 人 一 种 乐观 向 上 的 印 ， | 象 是 静 赠 、 低 沉 、 深 邃 ， 小 面积 高 明度 的 点 ， 
| 象 ， 蓝 色 从 上 到 下 色彩 重量 感 减轻 的 过 渡 ， | ， 缓和 演 染 让 整个 页 面 充满 了 立体 感 和 空间 感 ， 
| 让 人 产生 一 种 悬浮 于 空气 中 的 感觉 ， 使 人 心 | ， 让 人 感觉 到 神秘 和 变幻 莫 测 ， 使 人 充满 探索 | 
| 情 愉 悦 、 舒 适 。 | | 欲望。 | 
3 图 54 


明度 与 纯度 的 质感 D 


色彩 的 软 硬 主要 来 自 色彩 的 明度 ， 但 与 纯度 也 有 一 定 的 关系 ， 主 要 还 是 看 搭配 。 明 度 越 高 感觉 
越 软 ， 明 度 高 、 纯 度 低 的 色彩 有 柔软 感 ， 中 纯度 的 色彩 也 呈现 柔软 感 ， 如 图 5-5 所 示 。 色 彩 纯度 越 
低 则 感觉 越 硬 ， 如 果 明 度 也 低 ， 则 硬 感 更 明显 ， 如 图 5-6 所 示 。 


多 
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Moto Parts Bike Parts Fitness 


er ?a 
， 该 网 页 中 的 浅黄 色 和 白色 对 比较 弱 ， 虽 然 有 ， ' 黑色 及 蓝 黑色 带 有 一 种 深沉 和 理性 ， 背 景 使 | 
| 上 明度 较 暗 的 黄色 ， 但 因为 与 浅黄 色 的 过 渡 和 ， ， 用 不 同上 明暗 度 的 黑色 进行 配色 ， 让 人 有 一 种 | 


， 坚 硬 的 印象 。 明 艳 的 黄色 在 整 片 暗 沉 中 显得 
| 非常 突出 , 鲜明 的 对 比 使 整个 页 面 更 加 硬朗 。 


廊 配 色 案 例 10: 商务 网 页 配色 


页 面 中 的 苹果 绿色 与 深 紫色 形成 强烈 的 对 比 ， 视 觉 上 给 人 一 种 强烈 的 刺激 感 ， 
使 页 面 更 加 华丽 与 充实 。 


苹果 绿色 在 深 紫 色 的 衬托 下 ， 显 得 更 加 生机 勃勃 ， 让 人 脑 | 
* 万 物 复苏 的 美妙 景象 


回 ”设计 分 析 
@ 绿色 是 深 受 欢迎 的 颜色 之 一 。 苹果 绿 是 由 黄色 与 青色 调和 而 成 的 色彩 , 由 于 包含 的 黄色 较 多 ， 
给 人 活泼 的 感觉 ， 在 网 页 中 适合 表现 健康 活力 的 形象 ， 或 者 壮观 的 自然 景象 。 
@) 清新 的 苹果 绿 与 神秘 的 深 紫 色 搭配 ， 产 生 华丽 而 又 刺激 的 视觉 碰撞 ， 使 绿色 更 加 生机 勃勃 ， 
紫色 更 加 窒 智 内 伍 。 
@ 白色 的 文字 与 深 色 背景 形成 强烈 的 对 比 ， 给 人 一 种 干净 利落 的 印象 ， 让 人 感觉 亲近 、 柔 和、 
舒服 。 


< 


固 区 TO 


绘制 步骤 
第 1 步 : 创建 页 面 的 主要 版 块 结构 ， 插 入 Logo。 ;第 2 步 : 插入 图 片 ， 创 建 蒙 版 ， 输 入 文字 。 
一 一 一 一 
W3DES W3DES: 
4 
- 2 


! 第 3 步 ， 为 页 面 下 4 


部 分 添加 形状 和 色 块 。 ! 第 4 步 : 插入 文字 和 形状 ， 完 成 信息 栏 的 制作 。 
rr 一 -的 
W3DES W3DES: 
B 令 人 
-2 “A 


幼稚 
#9 !  #aacf52 |，  #occc00 | aacf52 | #2ebad 
温 启 ” 生长 
提 5b199 #bad693 |， fd2cce6 | #8f398 #fdd000 |， 和 DBd200 
延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


W3DES 


pp 
1 
了 


配色 评价 : 配色 评价 
蓝 色 是 很 常用 的 商务 色 ， 这 种 明艳 的 冷色 能 够 更 好 地 表现 出 ,红色 可 以 使 页 面 热情 洋溢 ， 但 是 当 大 面积 使 用 并 与 深 紫 色 措 
空旷 、 冷 静 和 害 智 的 感觉 ， 使 页 面 更 具 说 服 力 。 | 配 时 ， 会 给 人 一 种 烦躁 的 感受 ， 过 于 生硬 的 衔接 会 使 人 产生 


:对抗 的 情绪 。 
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名 ”相同 色 系 应 用 于 其 他 网 页 


| 应 用 于 健身 类 网 页 : ;应 用 : 
新鲜、 明快 的 六 果 绿 与 同色 系 拱 配 ， 展现 册 积极 向 上 的 动力 ，; 该 页 合用 大 面积 的 间 果 绿 ， 使 人 必 情 外， 优雅 、 轻 松 的 
有 一 种 鲜 活 的 气息 ， 给 人 一 种 居间 的 感觉 ， 与 少许 的 黑色 和 ; 氛围 中 流露 出 一 种 强大 的 生命 力 ， 给 人 贡 舞 的 力量 。 与 高 明 
| 红色 搭配， 有 一 种 蓄 势 待 发 的 力量 。 的 白色 拱 配 ， 使 页 面 更 加 具有 艺术 感 。 


波长 和 成 像 的 进退 感 D 


各 种 不 同 波长 的 色彩 在 人 眼 视网膜 上 的 成 像 有 前 后 之 分 ， 红 色 、 检 色 等 光波 长 的 颜色 在 视网膜 
之 后 成 像 ， 感 觉 比 较 迫 近 ; 蓝 色 、 紫 色 等 光波 短 的 颜色 则 在 视网膜 之 前 成 像 ， 在 同样 距离 内 感觉 就 
比较 后 退 。 实 际 上 这 是 一 种 视觉 错觉 。 

一 般 暖 色 、 纯色 、 高 明度 色 、 强 对 比 色 、 大 面积 色 、 集 中 色 等 有 前 进 感 ， 如 图 5-7 所 示 。 与 
颜色 的 前 进 感 相 反 ， 冷 色 、 浊 色 、 低 明度 色 、 弱 对 比 色 、 小 面积 色 、 分 散 色 等 有 后 退 的 感觉 ， 如 图 
5-8 所 示 。 


YILDIZ 


GRAFIK 3D 


HAKKIMDA 


GRAFIK 


| 发 障 的 灰 黄 背景 使 铺 在 上 面 的 一 层 红色 更 加 } 蓝 色 背 景 给 人 以 冷静 、 客 观 、 慎 重 的 印象 
显眼 ， 给 人 以 紧张 的 感觉 ， 使 有 紧迫 感 黑色 的 背景 给 人 一 种 神秘 、 冷 静 的 形象 ， 主 ， 
， 红色 中 明暗 与 纯度 的 对 比 ， 增 加 了 激烈 感 和 题 图 片 内 容 上 的 浊 色 调 让 页 面 产生 一 种 后 | 
， 警 示 的 感受 | 退 感 : 


由 于 色彩 有 前 后 的 感觉 ， 因 此 暖色 、 高 明度 颜色 等 有 扩张 、 膨 胀 感 ， 如 图 5-9 所 示 。 冷 色 、 低 
明度 颜色 等 有 收缩 感 ， 如 图 5-10 所 示 。 


OR oor re 


该 网 页 中 的 红色 、 栓 色 、 黄 色 ， 大 部 分 都 有 ， 该 网 页 中 大 范围 使 用 了 冷色 调 ， 既 突出 了 内 ， 
， 较 高 的 明度 ， 使 整个 页 面 有 一 种 扩张 、 膨 胀 、 ， ， 容 , 又 造成 了 页 面 的 收缩 感 , 使 整个 页 面 精练 、| 
， 爆 发 的 动感 | | 简明 。 

图 5-9 


5.6 间 [ 色彩 的 华丽 感 与 朴实 感 


色彩 的 三 要 素 对 华丽 及 质朴 感 都 有 影响 ， 其 中 纯度 关系 最 大 。 明 度 高 、 纯 度 高 的 色彩 ， 丰 富 、 
强 对 比 的 色彩 使 人 感觉 华丽 、 辉 煌 。 但 无 论 何 种 色彩 ， 如 果 带 上 光泽 ， 都 会 获得 华丽 的 效果 ， 如 图 
5-11 所 示 。 明 度 低 、 纯 度 低 的 色彩 ， 单 纯 、 弱 对 比 的 色彩 感觉 质朴 、 素 净 ， 如 图 5-12 所 示 。 


| 该 网 页 中 的 色彩 丰富 、 纯 度 较 高 ， 虽 然 被 黑 ， ， 该 网 页 中 的 色彩 明度 和 纯度 较 低 , 对 比较 弱 ， | 
， 色 占据 了 大 部 分 空间 ， 但 与 鲜明 亮丽 的 色彩 ， ， 几 道 亮丽 的 色彩 在 深 灰色 的 背景 中 障 淡 了 许 ， 
形成 鲜明 的 对 比 ， 呈 现 出 华丽 的 效果 。 ， 多 ， 整 体 给 人 淡泊 、 素 雅 的 感觉 
| 图 5-11 图 5-12 


太 配 色 案例 11: 搜索 引擎 网 页 配色 ) 


本 案例 制作 了 一 款 非常 时 尚 而 美观 的 搜索 引擎 主页 。 页 面 采 用 浅 灰色 作为 背景 ， 
a 被 布局 在 页 面 左边 、 中 部 和 右边 ， 但 由 于 面积 和 形状 不 规则 ， 所 以 
没有 常规 对 称 布局 带 来 的 静止 、 呆 板 的 感觉 。 


“页面 中 采用 了 大 量 的 紫色 ， 烘托 出 页 面 的 神秘 感 通过 搭配 


1 度 的 绿色 和 天 蓝 色 ， 增 加 了 趣味 感 


6 设计 分 析 

@ 使 用 浅 灰色 作为 背景 ， 确 定理 性 而 轻松 的 基调 。 小 面积 的 紫色 分 别 出 现 在 页 面 的 左 侧 、 中 央 
和 右 侧 ， 在 面积 和 位 置 上 得 到 了 很 好 的 平衡 与 呼应 。 嫩 绿色 和 青色 等 颜色 巧妙 中 和 了 紫色 的 忧郁 和 
阴暗 。 

@ 整个 页 面 中 文字 的 作用 已 经 被 削弱 到 了 最 低 ， 卡 通风 格 的 图 片 是 页 面 最 抓 眼球 的 元 素 ， 整 个 
页 面 效果 轻松 而 又 趣味 短 然 。 
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回 ”延伸 方案 
可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


| 配色 评价 | 
| 可 以 将 页 面 背景 换 成 高 纯度 或 高 We ts 但 颜色 太 过 单一 , 在; 
| 破坏 原始 效果 ， 还 可 以 降低 灰色 平淡 的 感觉 ， 为 页面 增 添 更 | 衬托 主 图 的 同时 也 有 降 品 的 作用 ， 显 得 页 面 过 于 沉静 。 

; 多 的 活力 和 清爽 感 ， 给 浏览 者 带 来 更 多 视觉 上 的 满足 。 


e | 

3 

> 。" | 

; 应 用 于 服装 鞋 帆 类 网 页 ; 应 用 于 设计 类 网 页 | 
| GD 使 用 艳丽 的 紫色 作为 背景 ， 营 造 出 一 种 华丽 而 又 沉静 的 时 色 是 一 种 高 纯度 低 明度 的 色彩 ， 如 果 使 用 不 恰当 ， 极 易 | 

| 。 氛围 | 。 显得 媚俗 ， 而 如 果 拱 配 巧妙 ， 则 可 以 产生 非常 好 的 效果 。 |! 


i@ 高 纯度 的 颜色 不 仅 可 以 最 大 限度 突显 出 前 景 中 低 纯度 的 鞋 (2) 页 面 使 用 浅 灰色 作为 基调 ， 只 使 用 极 小 面积 的 紫色 和 其 他 ， 
; ， 子 ， 又 与 天 蓝 、 嫩 绿 和 粉红 等 鲜艳 明快 的 色彩 相互 搭配 ，; ”鲜艳 、 明 快 的 颜色 相互 搭配 , 而 且 采 用 半 透 明 的 加 点 关 形 | 
上 碰撞 出 一 种 刺激 又 时 尚 的 感觉 。 ! ” 式 ， 整 个 页 面 充满 了 动态 感 和 趣味 性 。 


| 5.7 芒 色 彩 的 宁静 感 与 兴奋 感 2 
对 色彩 的 兴奋 感 和 宁静 感 影响 最 显著 的 是 色相 。 蓝 色 、 蓝 绿色 、 蓝 紫色 等 色彩 使 人 感到 沉着 冷静 ， 


低 明 度 和 低 纯 度 的 颜色 呈现 沉静 感 。 红 色 、 栓 色 、 黄 色 等 鲜艳 而 明亮 的 色彩 给 人 以 兴奋 感 ， 高 明度 
和 高 纯度 的 颜色 也 会 产生 兴奋 感 ， 如 图 5-13 和 图 5-14 所 示 。 


L778 


Eee 


| 蓝 色 的 背景 让 人 感到 沉着 、 冷 静 ， 该 网 页 中 ， ， 黄色 是 最 具 跳 跃 感 的 颜色 ， 该 网 页 中 大 量 使 | 
| 低 明 度 和 低 纯度 的 柔和 蓝 色 给 人 一 种 沉静 、 ， ， 用 高 明度 、 高 纯度 的 黄色 和 一 些 橙色 ， 鲜 攀 
| 安稳、 幽静 的 印象 | ， 而 明亮 ， 让 人 产生 兴奋 感 。 

图 5-13 图 5-14 


5.8 轩 [ 色彩 的 活力 感 与 庄重 感 


暖色 、 高 纯度 颜色 、 丰 富 多 彩 的 颜色 、 强 对 比 颜色 会 使 人 感觉 跳跃 、 活 泌 、 有 朝气 ， 如 图 5-15 
所 示 。 冷 色 、 低 纯度 颜色 、 低 明度 的 颜色 会 使 人 感觉 庄重 、 严 肃 ， 如 图 5-16 所 示 。 


Dlatite 


Pe a 

| 该 网 页 中 使 用 艺术 的 表现 形式 和 丰富 的 色彩 ，， ， 该 网 页 使 用 明度 和 纯度 低 的 灰 色 、 棕色 以 及 | 

给 人 以 时 尚 、 生 动 、 活 泼 的 感觉 ， 层 次 分 明 ， | ， 黑色 作为 页 面 的 主要 色彩 ， 给 人 以 庄重 、 严 ， 

: 且 对 主题 起 到 很 好 的 衬托 作用 。 | | 肃 的 印象 。 
图 5-15 图 5-16 


友 配 色 案 例 12: 化 妆 品 网 页 配色 


本 案例 使 用 清爽 的 水 蓝 色 和 艳丽 的 牡丹 粉 作 为 色彩 搭配 的 重点 ， 体 现 了 女性 化 


Ws 给 人 以 唯美 、 可 爱 的 感觉 。 

;案例 类 型 ¢ 
: 案例 背景 Et. 
: 表现 重点 “| 体现 浊 绽 、 动人 、 明丽 的 女性 特 质 ,符合 大 多 数 | 
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zol。 qpE da 


回 设计 分 析 

@ 使 用 白色 的 背景 ， 黑 色 的 文字 ， 搭 配 两 种 纯度 适中 、 明 度 较 高 的 对 比 色 系 中 的 色彩 ， 给 人 以 
鲜明 且 温 和 的 感觉 。 

@ 在 结构 上 宣传 内 容 和 主要 产品 平分 秋色 ， 架 构 清晰 ， 布 局 合理 ， 整 体 给 人 以 简洁 、 大 气 、 婉 
约 、 精 致 的 感觉 。 
昌 绘制 步骤 


AMOREPACIFIC MALL 


Som wan a ee? EN 


1 AMOREPACIFIC MALL 


EE 


同 配色 方案 

| 平和 | 开怀 | 
i #248a66 | #2ba9e | #5abac3 ;faeza | Wilae9 | #08300 | 
| 宁 | 尾 意 ! 


Ns Eee a 机 ns 
Ee - es A 中 


1 配色 评价 : ;配色 评价 : 

可 以 将 页 面 背景 换 成 高 纯度 或 高 明度 的 粉红 色 ， 这 样 不 仅 不 } 页面 中 使 用 了 纯度 较 高 的 大 红色 ， 虽 然 可 以 很 好 地 吸引 浏览 
会 破坏 原始 效果 ， 还 可 以 降低 灰色 平淡 的 感觉 ， 为 页 面 增添 ;者 的 注意 ， 但 由 于 色 块 面积 大 大 ， 产 品 内 容 很 容易 被 浏览 者 ; 

更 多 的 活力 和 浪漫 感 ， 给 训 览 者 带 来 更 多 视觉 上 的 满足 。 


Co 


; 应 用 于 化 妆 品 类 网 页 ， ; 应 用 于 奢侈 品类 网 页 : 
中 页面 中 使 用 大 面积 的 青色 作为 主 色 ， 营 造 出 清新 、 清 夹 的 ;0 页 面 中 使 用 同色 系 措 配方 式 ， 采 用 了 不 同 纯度 的 青色 作为 
视觉 效果 。 主 色 ， 页 面 清爽 干净 ， 给 人 一 种 时 尚 感 


@@) 页 面 中 加 入 天 蓝 色 、 粉 红色 和 黄 绿色 ， 给 人 一 种 青春 时 尚 ， ie@ 产品 主 图 的 黑色 与 页 面 文字 颜色 很 好 地 呼应 ， 使 页 面 整体 
的 视觉 体验 。 同 时 采用 灰色 的 背景 ， 将 众多 明度 较 高 的 颜 ;均衡 ， 主题 突出 ， 既 充满 了 时 尚 感 ， 又 烘托 出 产品 的 品位 。 
色 融 合 在 一 起 
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网 页 中 要 展示 的 内 容 很 多 ， 但 通常 会 有 主 次 之 分 。 使 用 合理 的 色彩 对 比方 法 除了 可 以 增加 页 面 的 
， 还 可 以 引导 用 户 按照 设计 好 的 浏览 顺序 浏览 页 面 ， 让 用 户 可 以 在 最 短 的 时 间 内 找到 页 面 中 的 


冷暖 对 比 的 配色 p 


丸 


利用 冷暖 差别 形成 的 色彩 对 比 称 为 冷暖 对 比 。 在 色相 环 上 把 红 \ 橙 、 黄 称 为 暖色 , 把 橙色 称 为 暖 极 
把 绿 、 青 、 蓝 称 为 冷色 ， 把 天 蓝 色 称 为 冷 极 ， 如 图 6-1 所 示 。 


_4 一 “在 色相 环 上 利用 相对 应 和 相 邻 | 
vy | ， 近 的 坐标 轴 就 可 以 清楚 地 区 分 ， 
> p> 有 < 出 冷暖 两 组 色彩 ， 即 红 、 橙 、 黄 ， 

嘱 > | 为 暖色 ， 蓝 紫 、 蓝 、 蓝 绿 为 冷色 。， 


暖色 ， 同 时 还 可 以 看 到 红 紫 、 黄 绿 为 中 | 
二 ， 性 微 暖色 ， 紫 、 绿 为 中 性 微 冷 色 。 | 


冷 极 es sy 中 性 微 暖色 


冷色 
中 性 微 冷色 


图 6-1 


寺中 色彩 冷暖 的 强 弱 对 比 程度 


色彩 冷暖 对 比 的 程度 分 为 强 对 比 和 极 强 对 比 。 强 对 比 是 指 暖 极 对 应 的 颜色 与 冷色 区 域 的 颜色 
进行 对 比 ， 冷 极 所 对 应 的 颜色 与 暖色 区 域 的 颜色 进行 对 比 ; 极 强 对 比 是 指 暖 极 与 冷 极 的 对 比 ， 如 
和 6-2 所 示 。 
暖色 与 中 性 微 冷色 、 冷 色 与 中 性 微 暖色 的 对 比 程度 比较 适中 ， 暖 色 与 暖 极 色 、 
f 比 程度 较 弱 ， 如 图 6-3 所 示 。 


这 


与 冷 极 色 的 


六 
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一 一 
MUSTERTITEE © 


| 蓝 色 与 栓 色 的 对 比较 强烈 ， 颜 色 鲜 艳 ， 给 人 ， 1 | 
| | | 时 比 给 ， 
| ， 该 网 页 中 微 暖色 黄色 与 微 冷色 紫色 的 对 比 给 ， 


| | ， 人 奢华 、 明 艳 的 感觉 ， 程 度 较 强 ， 紫 色 的 明 | 
但 仍然 能 给 浏览 者 刺激 感 ， 灰 色 的 加 入 降低 ， | 0 | 
了 这 利和 六 : | 隔 强 度 加 强 了 视觉 上 的 对 比 感受 。 

1 图 62 和 


冷暖 对 比 的 心理 感受 


在 重量 上 ， 暖 色 偏 重 ， 冷 色 偏 轻 。 在 湿度 感 上 ， 暖 色 干 燥 ， 冷 色 湿润 。 色 彩 的 冷暖 受到 明度 、 
纯度 的 影响 ， 暖 色 加 白 变 冷 ， 冷 色 加 白 变 暖 。 另 一 方面 ， 纯 度 越 高 ， 冷 暖 感 越 强 ， 纯 度 降低 ， 冷 暖 
感 也 随 之 降低 ， 如 图 6-4 所 示 。 


ED。 sen。 Mei Ml cm 


， 该 网 页 颜色 整体 偏 冷 ， 色 彩 纯 

， 度 较 高 ， 给 人 一 种 寒冷 的 印象 
-< 站 色 和 白色 的 加 入 降低 了 六 准 ， 
,的 感觉 ， 其 他 明艳 色彩 的 点 级 为 
， 页 面 增加 了 活跃 气氛 。 


色彩 在 页 面 中 的 面积 对 比 D 


色彩 的 面积 对 比 就 是 指 各 种 色彩 在 构图 中 占据 量 的 多 与 少 ， 面 积 的 大 与 小 的 差别 ， 将 直接 影响 
到 页 面 的 主 次 关系 。 在 网 页 中 使 用 两 种 或 两 种 以 上 的 色彩 时 ， 它 们 之 间 应 该 有 什么 样 的 比例 才 算 是 
平衡 呢 ? 也 就 是 不 使 其 中 某 一 种 色彩 更 加 突出 。 有 两 个 因素 决定 一 种 纯度 色彩 的 力量 ， 即 它 的 明度 
和 面积 。 
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在 同等 纯度 下 , 色彩 面积 大 小 不 同 , 给 人 的 感觉 也 不 同 。 面积 的 大 小 与 对 人 视觉 的 刺激 度 成 正比 ， 
色彩 面积 越 大 ， 其 可 看 见 的 程度 和 概率 就 越 大 ， 对 视觉 就 会 产生 刺激 。 

如 果 在 网 页 上 使 用 大 面积 的 高 亮度 红色 , 会 让 人 感到 难以 忍受 ; 大 面积 的 黑色 会 使 人 感到 阴沉 、 
灰暗 ， 喘 不 过 气 来 ， 大 面积 白色 会 让 人 感到 空虚 。 当 然 ， 如 果 在 网 页 上 使 用 面积 太 小 的 色彩 ， 也 会 
难以 被 人 发 现 ， 更 不 会 带 给 浏览 者 什么 感情 色彩 ， 如 图 6-5 所 示 。 


| 该 网 页 使 用 黄色 作为 主 色 , 使 用 | 
， 绿色 作为 辅 色 ， 属 于 暖色 和 中 性 ， 
| 微 冷色 的 对 比 ， 对 比较 强 但 不 会 ， 
| 让 人 觉得 有 刺激 感 ， 给 人 以 温 | 
| ， 和 、 健 康 的 感受 ， 页 面 中 的 红色 ， 
| 在 面积 上 占 比较 小 ， 在 白色 的 映 ， 
， 衬 下 显得 突出 ， 但 给 人 的 色彩 情 ， 
| 感 影响 不 大 。 | 
图 65 

在 网 页 配色 时 ， 首 先 要 确定 一 种 主 色 ， 使 其 成 为 网 页 中 的 大 面积 色 ， 随 后 根据 主 色 ， 选 择 所 需 
要 的 辅助 色 ， 使 其 成 为 一 种 小 面积 色 ， 达 到 点 缀 网 页 、 平 衡 网 页 色彩 的 效果 。 

当 在 网 页 中 使 用 两 种 颜色 以 相等 的 面积 出 现时 ， 它 们 的 冲突 也 会 达到 极限 ， 使 两 种 颜色 有 一 
种 势均力敌 的 感受 ， 色 彩 对 比 强烈 ， 但 如 果 降 低 两 种 颜色 的 明度 ， 这 种 激烈 程度 可 能 会 减 小 ， 如 
图 6-6 所 示 。 

当面 积 对 比 悬 殊 时 ， 会 减弱 色彩 的 强烈 对 比 和 冲突 效果 ， 但 从 色彩 的 同时 性 作用 来 说 ， 面 积 对 
比 越 悬殊 ， 小 面积 的 色彩 所 承受 的 视觉 感 可 能 会 更 强 一 点 ， 就 好 比 “ 万 花丛 中 一 点 绿 "那样 引 人 注目 ， 
如 图 6-7 所 示 。 


| 该 网 页 中 使 用 暖色 的 红色 和 极 冷 的 蓝 色 对 ， ， 该 网 页 中 大 量 使 用 了 红色 ， 绿 色 的 面积 相对 ， 
! 比 ， 属 于 强烈 的 对 比 ， 明 度 和 纯度 高 的 两 种 ， } 而 言 要 小 很 多 ， 但 却 能 在 视觉 上 吸引 更 多 的 | 
颜色 对 比 强烈 ， 而 使 用 了 透明 度 和 明度 较 瞳 ， ， 注意 力 ， 这 同时 与 色彩 的 明暗 和 纯度 也 有 一 | 
| 的 区 域 ， 对 比 程度 减弱 。 | | 定 的 关系 。 

图 6-6 图 6-7 


0 $0s mre 
外 区 可 色彩 面积 的 位 置 关系 > 


对 比 双 方 的 色彩 距离 越 近 ， 对 比 效果 越 强 ， 反 之 则 越 弱 。 双 方 互相 呈 接 触 、 切 入 状态 时 ， 对 比 
效果 更 强 。 如 果 一 种 颜色 包围 另 一 种 颜色 时 ， 对 比 的 效果 最 强 。 在 网 页 设计 中 ， 一 般 是 将 重点 色彩 
放置 在 视觉 中 心 部 分 ， 最 易 引 人 注目 ， 如 图 6-8 所 示 。 


， 页面 中 高 亮 的 档 色 与 沉 暗 的 黑 | 
， 色 形成 强烈 的 对 比 ， 而 纯度 、 明 | 
| 度 最 高 的 红色 和 纯度 、 明 度 最 | 
， 高 的 黄色 的 对 比 因为 距离 较 远 ， 
， 在 强烈 感 上 赂 过 一 敌 。 


图 6-8 


妆 配 色 案 例 13: 食品 网 页 配色 


浅 灰色 是 一 种 搭配 任何 色彩 都 能 显得 含蓄 而 柔和 的 色 
对 浅 色 在 网 页 色彩 搭配 中 的 运用 进行 详细 介绍 


宜 佳 仁 好 美味 一 家 人 都 爱 宜 佳 仁 


@ 该 页 面 中 将 明度 极 高 的 浅 灰 色 作 为 背景 色 ， 看 起 来 明快 却 不 空旷 。 搭 配 大 片 浅 绿色 的 主 色 ， 
给 人 以 从 背景 中 脱颖而出 的 感觉 ， 突 出 主题 
@ 与 同色 系 的 深 灰 色 文字 相 搭配 ， 使 整个 页 面 给 人 一 种 统一 的 感觉 , 为 整个 页 面 添加 稳重 气息 。 
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配色 评价 : ! 配色 评价 : 

! 除了 可 以 将 灰色 作为 背景 色 外 ， 也 可 以 使 用 浅 浅 的 嫩绿 色 作 ; 使 用 黄色 作为 背景 ， 显 得 页 面 十 分 明艳 动人 ， 与 红色 的 Logo 
{ 为 背景 ， 与 草地 的 颜色 形成 同色 系 搭配 ， 体 现 出 天 然 健康 的 ; 搭配 过 于 温暖 ,更 适合 传统 的 能 引起 人 食欲 的 美食 , 没有 清秀 、; 
| 感觉 丽 的 感觉 ， 不 适合 绿色 产品 的 健康 理念 。 | 


> ss me 


S 相同 色 系 应 用 于 其 他 网 页 


; 应 用 于 怀旧 风格 网 页 ， ; 应 用 于 家 居 网 页 ， 
| 整个 页 面 看 起 来 色彩 丰富 ， 但 实际 上 都 是 由 各 种 色彩 加 入 ;中 整个 页 面 以 浅 灰色 到 白色 的 缓和 渐变 分 清 页 面 的 主 次 ， 利 | 
| 。 极 少量 的 灰色 而 成 的 。 ; 。 用 浅 灰色 明之 的 色相 为 页 面 营造 轻松 而 简朴 的 气氛 。 。 
| @ 浅 淡 的 主体 颜色 与 明亮 的 浅 灰色 背景 相 搭配 ， 色 相 变化 缓 @ 加 入 适量 的 青色 布 满 整 人 页面， 减缓 灰色 调 的 页 面 带 给 人 
| 。 和 ， 突 出 页 面 的 优美 与 高 雅 ， 使 页 面 效果 和 谐 ; 。 的 瑞 废 、 消 极 和 沉 问 ， 给 人 沉静 、 轻 快 的 感觉 
; @) 加 入 醒目 的 绿色 和 紫色 ， 起 到 了 很 好 的 页 面 点 绿 效 果 ， 同 ; @) 深 次 色 的 文字 突出 页 面 的 同时 ， 呼 应 主题 图 片 颜色 ,为 页 ; 
| 。 时 与 浅 灰色 背景 相 搭配 ， 灵活 运用 了 灰色 吸收 色彩 活力 的 面 添加 了 稳重 气氛 。 | 

作用 ， 从 而 使 整个 页 面 效果 更 加 和 谐 。 1 


攻 色 相 和 色调 对 比 5 


色相 对 比 的 强 弱 ， 可 以 根据 色相 在 色相 环 中 的 间距 去 判断 。 在 网 页 设计 配色 中 ， 可 以 将 色相 环 
中 的 任意 色相 作为 某 个 页 面 的 主 色 ， 通 过 与 其 他 色相 组 合 进行 配色 ， 可 以 构成 原色 之 间 的 对 比 、 间 
色 对 比 、 补 色 对 比 、 邻 近 色 对 比 和 类 似 色 对 比 ， 以 此 来 表现 网 页 色彩 色相 之 间 不 同 程度 的 对 比 效果 。 


se “原色 对 比 © 


红 、 黄 、 蓝 三 原色 是 色相 环 上 最 基本 的 三 种 颜色 ， 它 们 不 能 由 别 的 颜色 混合 而 产生 ， 却 可 以 混 
合 出 色相 环 上 所 有 其 他 的 颜色 。 红 、 黄 、 蓝 表现 了 最 强烈 的 色相 气质 ， 它 们 之 间 的 对 比 是 最 强 的 色 
相对 比 。 如 果 在 一 个 网 页 的 配色 中 由 两 个 原色 或 三 个 原色 进行 配色 ， 就 会 令 人 感受 到 一 种 强烈 的 色 
彩 冲突 ， 如 图 6-9 所 示 。 


-一 POZNAJI 

Strone 
该 网 页 中 红 、 黄 、 蓝 | 
， 三 原色 均 有 体现 ， 色 | 
| 彩 冲突 较 强 ， 刺 激 感 | 
， 明 显 ， 给 人 一 种 兴奋 、| 
1 动感 的 印象 


图 6-9 
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色光 的 三 原色 是 红 、 绿 、 蓝 , 用 于 电视 、 电 脑 等 屏幕 显示 。 色彩 的 三 原色 是 红 、 黄 、 青 , 即 人 们 常 说 的 “ 红 、 黄 、 
蓝 ”， 用 于 彩色 印刷 等 行业 。 


5 间 色 对 比 © 

检 色 、 绿 色 、 和 紫色 是 通过 原色 相 混 合 而 得 到 的 间 色 ， 其 色相 对 比 略 显 柔 和 ， 自 然 界 中 植物 的 色 
彩 许多 都 呈现 间 色 , 许多 果实 都 为 查 色 或 黄 烧 色 , 还 经 常 可 以 见 到 各 种 紫色 的 花朵 , 例如 绿色 与 橙色 、 
绿色 与 紫色 这 样 的 对 比 都 是 活泼 、 鲜 明 又 具有 天 然 美 的 配色 ， 如 图 6-10 所 示 。 


JAKITO 2 


SMAKe 


| 该 网 页 以 浅 棕色 作为 背景 ， ， 
使 用 天 然 素 材 元 素 ， 加 入 红 | 
， 色 、 绿 色 、 橙 色 、 紫 色 、 黄 | 
， 色 ， 完 全 诠释 了 产品 的 特色 | 
， 和 理念 ， 给 人 以 活 小 、 自 然 、， 
鲜明 和 健康 的 感觉 


E68 补 色 对 比 
色相 环 上 相差 180” 的 颜色 称 为 互补 色 ， 是 色相 对 比 中 对 比 效果 最 强 的 对 比 关系 。 一 对 补 色 放 


置 在 一 起 ， 可 以 使 对 方 的 色彩 更 加 鲜明 ， 如 红色 与 青色 搭配 ， 红 色 变 得 更 红 ， 青 色 变 得 更 青 ， 如 图 
6-11 所 示 。 


#ff0000 


| 互补 色 是 色相 中 对 比 效果 | 
， 最 强 的 ， 通 常 在 网 页 配色 ， 
所 中， 使 用 典型 的 补 色 有 红色 ， 
,与 青色 、 绿 色 与 品 红 、 黄色 ， 
， 与 绿色 。 | 


00# So 

图 6-11 

黄色 与 蓝 色 由 于 明暗 对 比 强烈 ， 色 相 个 性 悬殊 ， 因 此 成 为 三 对 补 色 中 最 冲突 的 一 对 ;红色 与 青 

色 的 明暗 对 比 居 中 ， 冷 暖 对 比 最 强 ， 是 最 活跃 、 生 动 的 色彩 对 比 ， 绿 色 与 品 红 明 上 暗 对 比 近 似 ， 冷 暖 
对 比 居中 ， 显 得 十 分 优美 。 由 于 明度 接近 ， 两 色 之 间 相 互 强调 的 作用 非常 明显 ， 有 炫目 的 效果 。 
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5 邻近 色 对 比 © 


在 色相 环 上 顺序 相 邻 的 基础 色相 ， 例 如 红色 与 杰 色 、 黄 色 与 绿色 、 蓝 色 与 紫色 这 样 的 颜色 并 置 
关系 ， 称 为 邻近 色相 对 比 ， 属 于 色相 弱 对 比 范畴 ， 如 图 6-12 所 示 。 


， 在 红色 与 枉 色 对 比 中 , 栖 | 
| 色 已 带 有 红色 的 感觉 , 在 ， 
| 黄色 与 绿色 的 对 比 中 , 绿 | 
， 色 已 带 有 黄色 的 感觉 , 它 ， 
< 们 在 色相 因素 上 自然 有 相 
， 互 渗透 之 处 ; 但 像 红色 与 | 
| 橙色 这 类 的 颜色 在 可 见 光 ， 
EE ® ， 谱 中 具有 明显 的 相貌 特征 ， | 
者 ， 都 为 单 色 光 ， 因 此 仍 具 有 ， 

， 清晰 的 对 比 关系 。 | 


图 6-12 


邻近 色 对 比 在 配色 中 的 最 大 特征 是 可 以 让 网 页 具有 明显 的 统一 协调 性 ， 或 为 暖色 调 ， 或 为 冷暖 
中 间 调 ， 或 为 冷色 调 ， 同 时 在 统一 中 仍 不 失 对 比 的 变化 。 


类似 色 对 比 


在 色 环 上 非常 邻近 的 颜色 ， 例 如 橙色 与 杰 黄 色 、 绿 色 与 黄 绿 色 、 绿 色 与 蓝 绿色 、 蓝 色 与 蓝 紫 色 


这 样 的 色相 对 


比 称 为 类 似 色 相对 比 ， 如 图 6-13 所 示 。 


”类 似 色相 对 比 是 最 弱 的 色 ， 
， 相 对 比 效果 ， 在 视觉 中 能 | 
,感受 的 色相 差 很 小 ， 常 用 | 
| 于 突出 某 一 色相 的 色调 ， | 
,注重 色相 的 微妙 变化 ,在 ， 
网 页 配色 中 通常 用 一 两 种 | 
类似 色 作为 网 页 的 背景 ， ， 
,这 样 既 可 以 维持 网 页 的 色 | 
| 彩 统一 与 平衡 ， 又 可 以 突 | 
,出 网 页 内 容 中 所 使 用 的 配 ， 
| 色色 彩 。 


图 6-13 


类 似 色 之 间 含 有 共同 的 色素 ， 既 保持 了 邻近 色 的 单纯 、 统 一 、 柔 和 、 主 色调 明确 等 特点 ， 同 时 


又 具有 和 耐看 的 优点 ， 在 网 页 设计 中 ， 可 以 适当 应 用 小 面积 的 类 似 对 比 色 或 以 灰色 点 缀 来 增加 整个 网 
页 页 面 的 色彩 生气 。 


污 叶 色相 对 比 © 


所 谓 的 色相 对 比 ， 其 实 就 是 指 将 不 同色 相 的 色彩 组 合 在 一 起 ， 由 此 创造 出 鲜明 对 比 效果 的 一 种 
手法 。 不 同色 相 所 形成 的 对 比 效 果 ， 是 以 色相 环 中 位 置 距离 越 远 的 颜色 来 进行 组 合 ， 距 离 越 远 ， 效 


果 越 强烈 ， 如 


图 6-14 所 示 。 
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#ff0000 光 
8 
C7 


|! 该 图 为 12 色相 环 ， 在 色相 ; 
| 环 上 ， 对 应 角度 为 180 办 的 | 
4 颜色 色相 对 比 度 最 强 。 如 在 ， 
， 0” 位 置 、 色 值 为 #f0000 的 ， 
， 红色 和 在 180” 位 置 、 色 值 ， 
,为 #00ffff 的 青色 。 | 


图 6-14 


色相 对 比 的 强 弱 ， 可 以 根据 色相 在 色相 环 中 的 间距 去 判断 。 在 网 页 设计 配色 中 ， 可 以 将 色相 环 
中 的 任意 色相 作为 某 个 页 面 的 主 色 ， 通 过 与 其 他 色相 组 合 进行 配色 ， 可 以 构成 原色 之 间 的 对 比 、 间 
色 对 比 、 补 色 对 比 、 邻 近 色 对 比 和 类 似 色 对 比 ， 以 此 来 表现 网 页 色彩 色相 之 间 不 同 程度 的 对 比 效果 。 

色相 对 比 可 以 发 生 在 饱和 色 与 非 饱和 色 之 间 。 用 未 经 混合 的 色相 环 纯色 对 比 ， 可 以 得 到 最 鲜明 
的 色相 对 比 效果 。 鲜 明 的 颜色 对 比 能 够 给 人 们 的 视觉 和 心理 带 来 满足 。 


明度 对 比 © 


C3 
JJ00# 


由 两 种 不 同 明暗 度 的 色彩 并 列 而 产生 的 对 比 反 应 ， 称 为 明度 对 比 。 在 设计 时 明度 对 比 可 以 使 明 
色 更 亮 ， 而 暗色 更 暗 。 

为 什么 明度 对 比如 此 重要 呢 ? 主要 是 因为 人 类 的 眼睛 对 明度 差异 比较 敏感 ， 比 其 他 任何 一 种 对 
比 都 要 高 ， 有 时 人 们 会 无 法 察觉 纯度 或 是 色相 的 微妙 变化 ， 但 对 于 明度 的 变化 ， 即 使 差异 非常 微小 ， 
也 可 以 清楚 地 辨识 出 来 ， 如 图 6-15 所 示 。 


低 明 度 


图 6-15 

在 无 彩色 系 中 ， 明 度 最 高 的 是 白色 ， 明 度 最 低 的 是 黑色 ， 处 在 中 间 明 度 的 是 各 种 不 同 深浅 的 灰 
色 。 在 彩色 中 ， 各 种 彩色 也 都 具有 不 同 的 明度 性 质 ， 其 中 柠檬 黄色 的 视觉 度 高 ， 色 相 明度 也 就 最 高 。 
紫色 的 情况 正好 相反 ， 因 此 明度 便 显得 最 低 。 如 果 各 种 彩色 与 不 同 明暗 程度 的 黑 、 白 、 灰 色相 混合 ， 
就 可 以 得 到 许 许多 多 不 同 明度 的 色彩 。 

在 同一 色相 、 同 一 纯度 的 颜色 中 ， 混 入 黑色 越 多 明度 越 降低 ; 相反 ， 调 入 白色 越 多 ， 明 度 越 提 
高 。 利用 明度 对 比 ， 可 以 充分 表现 色彩 的 层次 感 、 立 体感 和 空间 关系 。 根据 色 彩 专家 研究 的 结果 表明 ， 
色彩 的 明度 对 比 的 力量 要 比 纯度 对 比 大 3 倍 ， 如 图 6-16 所 示 。 


蓝 色 明度 


原 图 降低 蓝 色 明度 提 
图 6-16 


纯度 对 比 


纯度 对 比 是 指 因 色彩 纯度 差别 而 形成 的 对 比 关系 ， 既 可 以 是 单一 色相 不 同 纯度 的 对 比 ， 也 可 以 
是 不 同色 相 、 不 同 纯度 的 对 比 ， 通 常 是 指 艳丽 的 颜色 和 含 灰 的 颜色 比较 ， 如 图 6-17 所 示 。 


| 任何 一 种 鲜明 的 颜色 , 只 | 
， 要 它 的 纯度 稍稍 降低 ， 就 ， 
| 会 引起 色相 性 质 的 偏离 ， | 
， 而 改变 原 有 的 品格 。 例 如 ， 
' 黄色 是 视觉 度 最 高 的 色 | 
! 彩 ， 只 要 稍稍 加 入 一 点 灰 | 
| 色 ， 立 即 就 会 失去 耀眼 的 ， 
光辉， 而 变 得 毫 无 生气 。 


图 6-17 
一 般 来 说 ， 高 纯度 的 色彩 清晰 明确 、 引 人 注目 ， 色 彩 的 心理 作用 明显 ， 但 容易 使 人 视觉 疲倦 ， 


不 能 持久 注视 。 低 纯度 的 色彩 柔和 含蓄 、 不 引 人 注 目 ， 却 可 以 持久 注视 ， 但 因 平 淡 乏 味 ， 看 久 了 容 
易 厌倦 。 因 此 较 好 的 配色 效果 ， 就 是 纯净 色 与 含 灰 色 的 组 合 配置 ， 利用 色彩 的 纯度 对 比 可 以 获得 既 
稳定 又 艳丽 的 色彩 效果 。 


同时 对 比 只 


当 两 种 或 两 种 以 上 的 色彩 在 网 页 中 一 起 配色 时 ， 相 邻 的 两 种 色彩 会 互相 影响 ， 这 种 对 比 被 称 为 
同时 对 比 。 


到 二 同时 对 比 的 基本 规律 
同时 对 比 的 色彩 基本 规律 是 ， 相 邻 的 色彩 会 改变 或 失去 原来 的 属性 和 原来 所 需要 传达 的 印象， 


并 向 另 一 种 色彩 互 换 ， 从 而 展示 出 新 的 色彩 效果 与 活力 。 
当 色 彩 越 接近 交界 线 时 ， 彼 此 影响 会 更 激烈 ， 并 会 引起 色彩 渗 漏 现象 。 例 如 灰色 靠近 橙色 时 会 
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带 来 蓝 色 效果 ， 靠 近 蓝 色 会 带 来 褐色 效果 ， 如 图 6-18 所 示 。 


， 如果 在 色相 上 两 种 色彩 接近 ， 
， 补 色 ， 对 比 效 果 将 更 强烈， 

， 当 红色 和 青色 同时 出 现在 网 ， 
' 页 上 时 ， 如 果 纯度 和 明度 一 | 
样 ， 那 么 红色 将 变 得 更 红 ， 

， 青 色 将 变 得 更 青 ; 在 明度 上 ， ， 
' 明度 高 的 会 更 高 ， 明 度 低 的 | 
| 会 更 低 ， 当 黑白 并 置 时 黑 | 


New Se Tn ow by On. 


018i02 72 58 。， 色 和 白色 会 更 加 明显 。 


图 6-18 


沪 如 | 同时 对 比 产生 的 生理 因素 @ 


同时 对 比 会 产生 生理 影响 ， 当 人 们 看 到 任何 一 种 特定 的 色彩 时 ， 眼 睛 会 同时 寻求 或 期 盼 它 的 补 
色 出 现 ， 如 果 没 有 补 色 出 现 ， 视 觉 会 自动 产生 补偿 色光 的 现象 。 

同时 对 比 中 补 色 的 产生 ， 是 作为 一 种 感觉 发 生 在 浏览 者 的 视野 里 的 ， 并 非 是 客观 存在 的 事实 ， 
这 一 点 与 补 色 之 间 的 对 比 有 所 区 别 。 当 兴奋 减弱 或 眼睛 疲劳 时 ， 同 时 对 比 效果 就 会 消失 ， 如 图 6-19 
所 示 。 


， 相同 底 色 的 两 张 图 片 ， 当 大 ， 
,面积 地 使 用 青色 时 ， 灰 色 部 
|< 分 会 看 上 去 有 些 有 色调 的 感 
， 觉 ; 而 当 大 面积 地 使 用 紫色 
， 时， 灰色 部 分 会 看 上 去 有 些 ， 
,冷色 调 的 感觉。 | 


当 人 们 浏览 网 页 配色 时 ， 观 察 配色 中 的 一 种 色彩 后 再 看 另 一 种 色彩 时 ， 视 觉 会 把 前 一 种 色彩 的 
补 色 加 到 后 一 种 色彩 上 ， 这 种 对 比 称 为 连续 对 比 。 
连续 对 比 与 同时 对 比 不 同 的 是 ， 同 时 对 比 主要 是 指 在 同一 时 间 、 同 一 空间 上 颜色 的 对 比 效果 ; 


连续 对 比 则 是 在 不 同 的 时 间或 者 在 运动 的 过 程 中 不 同 颜色 之 间 的 刺激 对 比 ， 如 图 6-20 所 示 。 


USA-MADE CHICKEN ea dan 
BREAST JERKY | 无 彩色 搭配 页 面 ， 色 彩 具 有 | 
yr 与 直 ;| | 层次 感 , 不 同色 彩 交替 变化 ， : 
= Af. = = } 这 种 连续 对 比 的 效果 让 网 页 ， 
| 产生 了 一 种 律动 感 。 黑 白 分 | 
， 朋 会 使 色彩 对 比 强烈 ， 浏 览 ， 
， 者 的 注意 力 会 被 页 面 中 间 的 
， 和 白色 和 黑色 吸引 ， 黑 和 白 分 明 
， 的 区 域 相 比 灰色 和 黑色 的 部 
， 分 ， 白 色 更 加 明亮 。 


图 6-20 


连续 对 比 的 现象 不 仅 表现 在 色相 上 ， 也 表现 在 明度 上 ， 当 浏览 网 页 的 白色 区 域 时 ， 再 注视 黑色 
区 域 会 发 现 黑色 更 黑 ， 反 之 白色 会 更 白 。 


交配 色 案例 14: 艺术 网 页 配色 


制作 艺术 性 的 网 页 时 ， 一 定 要 注意 在 色彩 搭配 上 不 仅仅 只 是 美观 那么 简单 ， 还 
要 让 浏览 者 感到 有 强烈 的 视觉 冲击 力 。 下 面 来 制作 一 个 非常 具有 个 性 的 艺术 网 页 。 
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回 设计 分 析 

中 该 案例 中 使 用 了 一 张 铬 黄色 背景 的 图 像 作为 焦点 图 。 这 张 卡通 风格 的 图 像 立体 感 和 空间 感 非 
党 好， 足够 支撑 起 整个 页 面 的 视觉 焦点 。 

@ 下 方 的 黄色 、 紫 色 和 青色 圆 点 在 页 面 上 方 都 有 与 之 相 呼应 的 色 块 和 元 素 。 整体 配色 效果 活泼 ， 
尽管 版 式 简单 ， 但 却 非常 吸引 人 。 

@@ 使 用 深 紫色 作为 辅 色 ， 突 出 主题 的 同时 为 页 面 添加 了 一 丝 神秘 气息 。 搭 配 页 面 下 方 的 黑色 文 
字 ， 使 页 面 获 得 等 重 的 呼应 ， 给 人 以 稳重 的 感觉 。 

@ 紫色 和 青色 的 加 入 使 页 面 配色 更 加 丰富 ， 同 时 也 有 效 缓解 了 高 纯度 、 高 明度 黄色 带 来 的 刺 


MBI ~ Mbl 


CO3AAEM CO3NAAEM 
Ceemun Coes 


© 配色 方案 


名 延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


es 主 色调 改变 以 后 ， 低 纯 度 的 紫红 色 标 签 将 会 拉 低 力 的 冲击 ， 能 够 吸引 人 的 注意 但 是 应 用 于 艺术 网 页， 显得 

品 红色 的 刺激 和 艳丽 感 ， 需 要 换 成 其 他 鲜艳 的 颜色 。 | 不够 柔和 及 和 谐 ， 表现 过 于 生硬 ， 降 低 了 流畅 感 和 柔美 的 感 

@ 也 可 以 在 页 面 下 方 添加 一 块 青色 ， 强化 整个 页 面 的 层次 感 ; 
和 空间 感 ， 而 且 有 区 别 分 类 信息 的 作用 。 


长 这 是 一 款 非常 明艳 的 冰 饮 类 网 页 。 页 面 中 直接 采用 大 片 的 
: 铬 黄 作为 焦点 图 ， 可 全 的 洒 玫 家 现 化 全 的 放 略 4 


| 应 用 于 品牌 饮料 网 页 ， 


热力 四 射 的 氛围。 
页面 下 方 则 采用 小 面积 的 嫩绿 和 红色 作为 点 级 ， 而 红色 又 
恰好 与 焦点 图 中 其 他 的 颜色 产生 呼应 ， 整 体 页 面色 调 协调 ， 
而 活泼 。 


Nentepe na Lepove VYcHLazeny 


os BD 
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应 用 于 艺术 类 网 页 : 
Oz 艺术、 设计 和 影视 传媒 类 的 网 页 都 非常 注重 体现 个 性 和 与 
众 不 同 的 感觉 ， 而 黄色 这 种 泗 眼 而 又 难以 驾 双 的 颜色 恰好 ， 
能 够 满足 这 种 要 求 。 | 
@ 这 款 艺术 类 网 页 采用 铭 黄色 作为 背景 ， 恰 到 好 处 的 明度 能 ， 
够 提供 比 纯 黄色 更 加 柔和 舒适 的 刺激 感 。 使 用 邻近 的 楼 红 ; 
色 和 红色 作为 辅 色 。 | 
人 @@ 这 两 种 颜色 相对 比较 温暖 抢 丽 , 所 以 不 会 破坏 页 面 的 氛围 ， 
也 不 会 降低 铭 黄 的 新 鲜 程度 。 页 面 的 留 白 很 充裕 ， 轻 松 、 
舒适 的 感觉 府 释 得 很 到 位 。 


红色 系 的 应 用 le 


7.1 热情 的 正 红 色 p 


红色 是 网 页 设计 中 常用 的 一 种 颜色 , 通常 可 以 吸引 浏览 者 的 注意 .除了 可 以 整个 页 面 都 是 红色 外 ， 
也 可 以 使 用 局 部 点 级 的 方式 突出 网 页 的 特点 。 
正 红色 是 中 国 传统 文化 的 色彩 ， 也 是 最 鲜艳 生动 、 最 热烈 的 颜色 ， 具 有 强烈 的 情感 色彩 ， 能 
人 感到 兴奋 ， 会 给 人 带 来 快乐 。 它 代表 着 激进 主义 ， 代 表 革命 与 牺牲， 常 让 人 联想 到 火焰 与 激情 ， 
如 图 7-1 所 示 。 


#e71419 


#911a14 


高 纯度 的 正 红色 给 人 以 热情 和 活 
力 感 ， 黑 与 白 的 搭配 给 人 庄重 和 | 
格调 感 ， 毫 不 缺失 优质 的 感觉 


图 7-1 


在 该 案例 中 使 作为 背景 色 ， 突 显 产品 的 品质 。 使 用 红色 作为 网 
同时 采用 了 不 同 明度 的 红色 作为 辅 色 。 而 文字 颜色 使 用 了 白色 ， 整 个 页 面 
题 明确 。 
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+------------ -一 -~ 


! 整体 给 人 以 热情 、 温 暖 的 感觉 ， 使 用 白色 作为 背景 色 和 文字 色 ， 
表现 重点 | 简洁 易 读 ， 虽 然 大 众 化 却 很 有 亲和力 。 浅 灰色 略 带 沉静 感 ， 有 调 | 


1 
和 lay 4 


j ;和 的 作 | | 


回 设计 分 析 
GD 在 整个 案例 中 并 没有 使 用 大 片 的 红色 ， 但 给 人 的 印象 却 是 满 屏 的 红色 。 除 了 选择 了 合适 的 核 
心 图 片 外 ， 还 得 益 于 页 面 中 的 标志 和 导航 也 使 用 了 与 主 色 相同 的 红色 ， 既 起 到 了 对 称呼 应 的 作用 ， 
又 使 主 色 向 整个 页 面 延 伸 。 
@ 在 案例 中 使 用 白色 作为 背景 色 ， 突 显 产品 的 品质 。 
(@ 使 用 红色 作为 网 页 的 主 色 ， 同 时 采用 了 不 同 明度 的 红色 作为 辅 色 。 而 文字 颜色 使 用 了 白色 ， 
整个 页 面 整 齐 又 主题 明确 。 
铝 绘制 步骤 
第 1 步 : 确认 网 页 主 色 ,创建 整体 框架 。 


1 
1 
honeeonecceenc=cceecec=============----------------- = 


EEEEE 1 首页 。 生产 基地 ”关于 品牌 。 活动 汝 区 。 ”会员 优 间 


和 
由 
总 
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关于 品牌 。 活动 热 区 


yous bomen 


本身 定 便 再 计 亏 南 


休闲 沙发 上 其 它 系列 


商务 休 半 水 委 a 
是 代 布 水 生 。 大 相近 半 生 视 村 列 
合体 床 名 经 大 房改 


其 几 系列 
Ft 到 
可 闪 到 由 慨 。。 叶子 s 押 溢 起 必 


名 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


水 星 家 私 首页 。 生 严 基地 。 关于 品牌 。 矣 动 热 区 。 “会员 伏击 


[x 


> ouRWS. 


重 身 羡 估 大 字 局 雪 


;配色 评价 : ;配色 评价 : 

ID 以 黄 、 橙 、 红 色 进 行 搭配 ， 有 着 烟花 的 灿烂 、 阳 光 的 明媚 , ;四 ) 紫色 是 浪漫 的 颜色 ， 当 与 红色 和 品 红色 搭配 时 ， 有 豪华 感 ， 
! 色调 鲜明 、 活 泌 。 给 人 奢侈 的 印象 。 

:@) 显示 出 热情 、 饱 满 的 感觉 ， 给 人 一 种 积极 向 上 的 意象 状态 ,:@) 黄色 是 非常 具有 动感 的 颜色 ， 与 紫色 对 比 强 烈 ， 用 于 家 居 ; 
; 红 橙 整体 上 和 和 i 沉 | 
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© 系 应 用 于 其 他 网 页 


| 应 用 于 高 档 餐 厅 网 页 
| D 整个 页 面 是 以 红色 作为 基调 ， 具 有 很 强 的 视觉 冲击 效果 ， | GD) 以 红色 作为 页 面 的 背景 ， 给 人 热 辣 和 激情 的 感觉 ， 多 层 
| 。 非常 符合 食品 网 页 设计 的 要 求 。 的 红色 吸引 浏览 者 仔细 阅读 文字 内 容 。 

| @ 黑色 的 字体 在 红色 中 形成 反差 ， 整 体 页 面 醒目 而 稳重 ， 让 ; @) 使 用 白色 文字 ， 与 背景 反差 强烈 ， 便 于 阅读 。 

| 。 浏览 者 产生 食欲 。 


成 熟 的 深 红色 2 


深 红色 是 在 原 有 的 红色 基础 上 降低 明度 而 得 ， 给 人 一 种 成 熟 、 浪 漫 、 优 雅 的 感觉 。 深 红色 在 设 


计 中 被 广泛 应 用 ， 用 来 传达 有 活力 、 积 极 、 热 诚 、 温 暖 及 前 进 等 含义 的 企业 形象 与 精神 ， 如 图 7-2 
所 示 。 


Natural Home Treatment 
For Cellulite 


| 深 红色 与 白色 的 搭配 可 以 给 人 一 
| 种 优质 感 ， 与 黑色 显示 出 成 有 
， 和 品位 ， 融 合 的 配色 有 新 潮 和 


~ Barbecue 


图 7-2 
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热烈 的 朱红 色 D 
朱红 色 是 被 人 类 所 使 用 的 古老 颜色 之 一 ， 是 一 种 不 透明 的 朱砂 而 制 成 的 颜色 。 朱 红色 介 于 红色 


系 与 检 色 系 中间 , 其 色 感 温暖 , 性 格 刚烈 而 外 向 , 是 一 种 对 人 刺激 性 很 强 的 颜色 ,容易 引起 人 的 注意 ， 
如 图 7-3 所 示 。 


了 NEAosny 


多 WHY FRESH?D 


HAaPPINESSIN YOUR LIFE 


， 鲜亮 的 朱红 色 成 功 吸引 浏览 者 的 ， 
， 注 意 ， 与 黄色 搭配 给 人 以 温暖 的 ， 
i i en , etn re ea | 感觉 , 白色 和 绿色 显得 灵活 整洁 。 


图 7-3 


大 配 色 案例 16; 书籍 网 页 配色 [人 


由 深 到 浅 的 渐变 色 和 具有 立体 效果 的 焦点 图 很 好 地 突显 出 页 面 的 纵深 感 ， 嫩 绿 
和 朱红 等 高 纯度 的 艳 色 和 不 规则 形状 的 撕 纸 、 气 泡 图 形成 功 化 解 了 深 棕色 的 沉 闽 。 


! 背景 的 深 棕色 明度 和 纯度 均 比较 低 ， 显 得 稳重 而 沉闷 。 鲜 艳 ; 
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回 设计 分 析 
@ 本 案例 中 的 浅 色 调 主要 起 到 调和 主 色调 及 点 睛 色 的 色彩 过 渡 作 用 。 嫩 绿 的 点 睛 色 强化 了 页 面 
的 华丽 感 ， 使 整个 页 面 看 起 来 生动 活泼 ， 又 不 失 含 鞋 沉 稳 。 
@ 使 用 由 深 到 浅 的 渐变 色 刻 意 营造 一 种 空间 感 ， 而 焦点 图 明显 的 立体 效果 更 强化 了 这 种 感觉 。 
(@ 整个 页 面 冷暖 对 比 、 明 暗 对 比 、 色 相对 比 都 极为 鲜明 ， 使 用 渐变 的 过 渡 使 整个 页 面 能 迅速 吸 
引 眼 球 且 能 达到 协调 的 感觉 ， 也 不 会 有 杂乱 的 感觉 。 
自 ”绘制 步骤 


| 第 1 步 : 填充 背景 色 ， 插 入 主题 图 片 ， 设 置 导航 栏 | 第 2 步 : 插入 图 片 ， 添 加 文字 和 渐变 。 


#c11920 


#c11920 


102/ 


句 延伸 方案 
-可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


色 评 价 : 色 评价 : | 
) 紫色 的 色 感 微 冷 ， 将 明度 降低 后 很 适合 作为 背景 ， 可 以 更 ; 红 紫 色 拥有 红色 的 奢华 和 紫色 的 高 贵 ， 与 黄色 拱 配 可 以 表现 } 
好 地 强调 空间 感 与 景深 感 尊贵 的 气质 ， 酒 吧 和 歌厅 喜欢 用 红 紫 色 的 灯光 可 以 显示 出 | 


将 下 方 的 版 底 信息 部 分 也 采用 与 导航 相同 的 撕 纸 样式 ， 、 迷 幻 的 效果 。 但 是 用 在 书籍 网 页 ， 色彩 印 旬 与 主题 概 : 
么 整个 页 面 的 首尾 将 会 相互 呼应 。 


Ta a ExpERIENCE 
二 
| 应 用 于 教育 类 网 页 | 应 用 于 商务 类 网 站 


1 该 网 页 以 红 郴 色 为 点 级 色 ， 通 过 范围 较 大 的 背景 白色 、 灰 白 ; 该 网 页 并 非 采用 大 篇 幅 的 红色 , 使 用 白色 作为 网 页 的 背景 色 ， 
! 色 的 前 景 图 片 和 白色 文字 制造 出 明快 气氛 的 同时 ， 又 呼应 整 ! ! 导航 与 版 底 使 用 了 鲜艳 的 红色 ， 使 网 页 整体 不 再 单调 ， 使 页 ; 
1 个 页 面 ， 使 简单 的 教育 网 页 充满 生机 与 活力 。 视觉 效果 得 到 强化 。 | 


甜蜜 的 玫瑰 红 5 


玫瑰 红 犹 如 玫瑰 一 样 娇艳 芬芳 ， 玫 瑰 红 的 色彩 透彻 明晰 ， 可 以 营造 出 温馨 浪漫 的 氛围 ， 又 流露 
出 含 蕾 的 美感 ， 华 丽 而 不 失 典雅 ， 通 常用 来 表现 浓郁 高 雅 的 情调 、 热 烈 奔放 的 情感 以 及 女性 柔美 多 
情 的 一 面 ， 如 图 7-4 所 示 。 

玫瑰 红 若 与 同类 色 搭配 ， 根 据 色调 的 差异 ， 可 以 达到 温暖 时 尚 、 热 情 奔放 的 效果 ， 与 不 同色 相 
搭配 ， 依 然 可 以 营造 出 大 方 文雅 的 气息 。 
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， 玫 瑰 红 的 甜美 芬芳 宰 托 出 产品 的 | 
， 浪 温 温 亏 主 题 ， 紫 色 与 黄色 的 点 | 
， 绥 给 人 以 散落 花 鸭 的 律动 感 . 


油 否 


图 7-4 


友 配 色 案 例 17: 


扩大 留 白 空间 ， 将 色彩 的 面积 缩小 ， 会 给 人 一 种 朴素 的 印象 ， 这 类 颜色 的 组 合 
多 用 于 女性 主题 ， 例 如 化 妆 品 、 服 装 等 ， 容 易 营造 出 娇媚 、 艳 丽 的 氛 | 


ee : 5 ， 但 是 承受 的 作用 性 很 
| 强 ， 色 彩 形成 强烈 对 比 ， 就 像 “ 万 绿 从 中 一 点 红 ”那样 夺 
; 人 眼球 ， 使 页 面 皇 现 一 种 活泼 悦目 的 效果 


1 
1 
1 
~ 
1 
1 
1 
1 
1 


交 涩 护卫 有 大 3 当 训 冰 针 才 让 
近 华 对 四 


一 表 8 孚 :时 站 执 有 百 查 Trgglngs 


1 TES 


oi TO ed 
01 We 六 在 上册 名 办 在 身 
-> 02 妇 秀 多半 i 
-7 03 二 民 上 的 男 下 人 要 全 试 大 iphone 
f 04 断 全 高 8 心机 到 的 Ta 神 克 大 各 


*x** 四 


[时 尚 导购] SHOPPER 


清和 出示 闪 本身 更 昌 委 美女 
要 耽 记 全 身 保 入 完 和 女人 
页 笨 装修 加 变 折 长 
PT 
CE 


回 设计 分 析 

中 政 红 色 属于 高 纯度 的 颜色 ， 所 以 要 人 避免 与 高 纯度 的 色彩 组 合 ， 以 免 给 人 带 来 一 种 繁杂 低俗 的 
印象 。 

@ 本 案例 中 玫 红 色 在 页 面 构图 中 所 占 的 面积 并 不 多 ， 加 以 浅 灰 色 的 背景 ， 给 人 以 温馨 典雅 的 
感觉 。 


名 绘制 步骤 


fa, Fashion 


Photoshop CC 网 页 配色 设计 全 程 揭秘 ( 第 2 版 ) 


句 ”延伸 方案 
可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


maar Top 
01 Wasa 
02 mee 

03 Nm 
os 机 


Me 


ET 


; 配色 评价 : ! 配色 评价 : 
1GD 紫色 是 既 庄 重 、 蹇 智 且 又 不 失 浪漫 的 色彩 ， 可 以 展示 出 女 ;中 黑色 与 白色 或 浅 灰色 搭配 很 具有 时 尚 气息 ， 给 人 以 浓郁 、 


| 性 的 高 贵 和 成 熟 美 。 ! 神秘、 深邃 的 感觉 ， 并 且 有 很 强 的 正式 感 ， 当 有 彩色 点 级 
) 灰色 与 紫色 搭配 ， 增 添 了 几 分 品质 和 高 雅 ， 给 人 以 神秘 感 ! 
和 卓越 感 。 !@ 唯一 的 不 足 是 页 面 欠缺 一 些 娇柔 、 妩 媚 感 ， 既 无 一 丝 甜美 ， 


@ 文字 色 和 背景 色 是 深 灰 和 浅 灰 的 搭配 ， 在 紫色 辉映 下 ， 有 
低调 、 奢 华 的 感觉 。 | 


时 ， 会 让 人 觉得 绚丽 又 不 失格 调 。 ! 
也 无 丝毫 浪漫 ， 因 此 黑色 更 适合 应 用 在 男士 时 尚 网 页 。 


pn 


e ns 


22733 六 mf ml 一 


ASAWEB 


! 应 用 于 门户 网 页 ， ! 应 用 于 商务 型 网 页 : : 
!@ 白色 的 背景 使 玫瑰 红 脱 颖 而 出 ， 令 人 眼前 一 亮 。 ! @ 该 网 页 中 使 用 鲜艳 夺目 的 玫瑰 色 搭配 浅 灰 色 的 背景 ， 效果; 
1@ 浅 灰色 的 色 块 对 玫瑰 红 起 到 一 定 的 衬托 作用 ， 给 人 很 有 品 | 和 谐 且 主题 突出 。 | 
! 位 的 感觉 。 1G@) 小 面积 的 蓝 色 和 绿色 的 加 入 ， 增 加 了 页 面 的 时 尚 感 和 商务 | 
!@) 深 灰色 的 色 块 很 好 地 降低 了 玫瑰 花 的 热度 ， 平衡 了 整个 页 ; 感 ， 给 人 层次 丰富 、 结 构 协调 的 感觉 。 | 
! 面 的 色温 。 1 


华丽 的 紫红 色 D 


紫红 色 是 女性 化 的 代表 颜色 ， 通 常 能 够 传达 出 浪漫 、 华 丽 以 及 优雅 的 气息 ， 紫 红色 是 由 品 红 加 
少许 的 黄色 和 紫色 得 来 ， 又 称 粉红 色 ， 给 人 一 种 高 贵 、 低 调 、 华 丽 的 感觉 ， 在 网 页 中 通常 大 面积 使 
用 该 颜色 ， 如 图 7-5 所 示 。 


,该 网 页 使 用 和 紫红 色 作为 主 色 ， 
,给 人 以 青春 靓丽 的 感觉 ， 配 以 | 
, 黄色、 绿色 和 蓝 绿色 的 点 组 ， 
丰富 且 活 没 。 


图 7-5 


富贵 的 宝石 红 


宝石 红 像 宝石 一 样 象征 着 高 贵 与 奢华 ， 而 以 贵重 的 宝石 来 命名 也 可 以 说 是 恰如其分 。 宝 石 红 是 
在 浓厚 热烈 的 红色 中 融入 紫色 ， 将 女性 的 魅力 展现 得 淋漓 尽 致 ， 如 图 7-6 所 示 。 


Luxury Style Fashion 


,玫瑰 红 的 甜美 芬芳 衬托 产品 主 图 ， 
， 的 浪漫 温 声 主题 ， 紫 色 与 黄色 的 | 
| 点缀 给 人 以 散落 花 辩 的 律动 感 


六 配色 案例 18: 美食 网 页 配色 


宝石 红 的 色相 微 暗 ， 是 一 种 比较 含蓄 的 色彩 ， 


给 人 一 种 内 和 柔 外 刚 的 印象 ， 搭 配 
神秘 的 黑色 ， 使 页 面 的 华美 氛围 


案例 背景 a 


BE 


@ 设计 分 析 
个 黑色 的 图 片 与 导航 衬托 出 宝石 红 与 浅黄 色 搭配 的 华美 感 ， 同 时 黑色 也 呈现 出 一 种 神秘 感 。 在 
制作 饮食 网 页 时 ， 采 用 高 明度 与 鲜艳 的 色彩 往往 会 提高 人 的 食欲 。 
@) 
3) 


页 的 文字 颜色 采用 了 白色 ， 使 整体 的 清晰 度 提高 ， 给 人 简洁 的 印象 。 
色 的 背景 一 般 不 适合 在 食品 图 片上 使 用 ， 但 主 图 的 色彩 搭配 和 亮度 、 对 比 度 的 处 理 明 艳 、 
协调 且 恰 到 好 处 ， 显得 更 加 突出 和 质感 强烈 。 

© bai 


湘 
疼 


sromr cue cowscr -寺中 Sromy cuutewy。 cowracr 


ES ext 


e 配色 方案 


名 延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


LOCATION = MENU EvwuTS 


TULAS OKLANOMAS FINST PIZZA BY THE SLOICE FOOO TRUCK 


WHERE’S THE TRUCK TODAY? 


x CLCERO 


! 配色 评价 
! 将 宝石 红 换 为 正 红色 ， 为 页 面 增 肖 


es 


; 应 用 于 汽车 类 网 页 


| 配色 评价 : ! 
的 气氛 ， 使 页 面 富有 ; 将 宝石 红 换 为 灰色 ,页面 传达 出 过 于 正式 的 高 贵 感 ， 有 些 传 ; 
| 统 气息 ， 缺 少 活跃 的 气氛 ， 虽 然 不 失 美感 ， 但 也 增加 了 一 些 ; 


; 应 用 于 电信 套餐 网 页 : 


| 汽车 类 网 页 采用 高 贵 的 宝石 红 作为 主 调 ， 展 现 出 大 气 奢华 的 ; 该 网 页 利用 对 比 的 方式 进行 表现 ， 通 过 鲜艳 的 背景 色 与 浅黄 |; 


! 气息， 与 黑色 搭配 ， 能 够 彰显 出 强烈 的 时 尚 感 和 酷 炫 气息 ， } 色 的 文字 内 容 形成 鲜明 的 对 比 ， 有 效 衬 托 出 文字 内 容 ， 使 页 | 


! 带 给 人 强烈 的 视觉 冲击 。 


; 面 表现 力 更 强 ， 视 觉 效果 更 好 。 l 


5 让 (8 三 芝 档 色 系 的 应 用 p 


生机 勃勃 的 正 栖 色 5 


橙色 是 轻快 、 欢 欣 、 收 获 、 温 声 、 时 尚 、 快 乐 、 喜 悦 的 色彩 。 一 般 食 品 题材 的 网 页 都 会 采用 这 
种 带 有 味觉 的 颜色 作为 主 色调 ， 如 图 8-1 所 示 。 


该 网 页 中 使 用 正 楼 色 作为 主 色 ， 
a 给 人 以 时 尚 、 收 获 的 感觉 ， 绿 色 | 
要 区 ， 的 添加 给 人 以 健康 的 印象 


图 8-1 


女 配 色 案 例 19: 活跃 的 美食 网 页 配色 


橙色 是 容易 引起 食欲 的 颜色 ， 常 被 用 于 味觉 较 高 的 食品 网 页 。 橙 


目 、 具 有 芳香 的 颜色 ， 所 以 也 常 被 用 于 对 视觉 要 求 较 高 的 时 尚 网 页 。 


案例 背景 


上 来 食欲 和 安全 感 的 颜色 , ， 


主题 1 


! 采用 红 、 橙 、 绿 这 些 能 够 给 人 并 
! 以 突出 健康 食品 的 


@ ”设计 分 析 


第 8 章 橙色 系 的 应 


@ 村 色 在 美食 网 页 设计 中 较为 常用 ， 网 页 中 使 用 禁 色 不 仅 能 够 引起 浏览 者 的 食欲 ， 还 可 以 给 


兴奋 而 热烈 的 感觉 ， 同 时 也 可 以 活跃 气氛 。 


@ 整个 页 面 中 使 用 大 面积 的 明度 较 低 的 深 林 


个 网 页 添加 了 一 丝 尊贵、 神秘 的 色彩 ， 


(@) 深 红色 作为 整个 页 面 的 3 


整个 页 面 更 加 灵巧 。 


色 作 为 背景 颜色 ， 在 减少 视觉 疲劳 的 同时 ， 更 为 整 
景 中 又 添加 少许 亮 眼 的 黄色 提高 明度 ， 营 造 了 活跃 的 气氛 。 


色 ， 强 有 力 地 增加 了 视觉 冲击 力 。 而 上 


色 的 文字 作为 点 睛 之 笔 ， 使 


OK 


加 ”配色 方案 


加 延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


| 配色 评价 ， 配色 评价 | 
| 背景 除了 可 以 使 用 橙色 以 外 , 也 可 以 使 用 墨绿 色 , 在 泻 染 尊贵 、| 蓝 色 具 有 广阔 悠远 的 气质 ， 当 大 面积 出 现时 ， 会 显得 清 汶 和 
! 的 同时 ， 突 出 健康 主题 。 静 ， 使 整个 页 面 缺少 温暖 和 火热 ， 抑 制 : 


@” 相 同色 系 应 用 于 其 他 网 页 


1 
1 
~ 1 
A conl me bE 和 
ontene epresertantes 
| NW 
1 
1 
1 
1 
1 
1 


应 用 于 业务 推广 网 大 
!@ 整个 页 面 是 以 正 橙 色 作为 主 色调 ， 让 浏览 者 产生 食欲 。 辅 ! 四 以 大 面积 的 白色 作为 页 面 的 背景 ， 提 高 页 面 亮 度 。 以 零星 ， 
1 。 色 使 用 显眼 的 紫色 调 ， 为 页 面 增加 神秘 气氛 。 的 橙色 作为 主 色调 ， 分 散 于 整个 页 面 ， 增 加 了 页 面 的 活 ! 
1@) 文字 为 灰白 色 ， 背 景 使 用 大 范围 白色 制造 出 明快 气氛 的 同 ，。 跃 度 。 


; 应 用 于 食品 网 页 


时 ， 又 与 整个 页 面 统一 ， 给 人 以 强烈 的 视 党 刺激 ， 有 力 地 ; @ 以 灰 蓝 色 作为 辅 色 ， 在 增加 活路 气氛 的 同时 ， 使 用 灰色 文 
吸引 浏览 者 的 目光 。 ! 。 字 使 页 面 活跃 而 不 失 稳重 ， 令 浏览 者 印象 深刻 。 


第 8 章 橙色 系 的 应 


丰收 的 太阳 楼 p 


在 网 页 设计 中 ， 太 阳 林 象征 着 幸福 和 亲近 ， 通 常用 来 表达 温暖 、 欢 快 和 活泼 的 效果 ， 因 此 太阳 
杰 一 直 以 来 都 被 称 为 “温暖 之 乡 ”的 颜色 ， 常 用 在 家 庭 题材 的 网 页 配色 上 ， 如 图 8-2 所 示 。 


pmonvcm 
4 全 


biave Lavor ol Sunkist Soda fcliciousness, 
Don tworry Wyou don thaveltol 


省 


re px ， 该 网 页 以 太阳 橙 为 主 ， 使 用 不 同 | 
， 纯 度 和 明度 的 橙色 , 体现 出 欢乐 、 | 
活跃 的 年 轻 态 。 : 


图 8-2 


女 配 色 案 例 20: 产品 宣传 网 页 配色 


本 案例 是 一 个 电子 产品 企业 推销 广告 网 页 。 页 面 使 用 大 范围 的 橙色 ， 橙 色 系 具 
ee 强 有 力 地 表 
达 了 朝气 莲 勃 、 各 扩 同 下 作 盾 同 由 于 人 时 亲近 的 感觉 。 


案例 类 型 
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回 ”设计 分 析 

@ 使 用 白色 作为 背景 ， 提 高 了 整个 网 页 的 明亮 度 ， 制 造 出 明快 的 气氛 ， 用 白色 文字 制造 出 明快 
气氛 的 同时 ， 又 与 整个 页 面 统一 。 

@ 大 范围 的 禁 色 使 整个 页 面 的 视觉 刺激 极其 耀眼 强烈 。 使 用 明度 较 低 的 灰色 作为 辅 色 ， 为 整个 
页 面 增 加 了 一 丝 严肃 的 气氛 。 


日 缚 上 弛 0 
;第 1 步 新 建文 件 ， 导 入 网 站 Logo。 ;第 2 步 : 输入 文字 ， 完 成 网 页 导航 的 制作 。 
[Ew [Ew 


:第 3 步 插入 图 片 ， 绘 制图 形 ， 完 成 网 页 主体 内 容 。 ;第 4 步 : 插入 图 片 ， 输 入 文字 ， 完 成 页 面 设计 。 


句 延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


ec 色 评 价 : 色 评价 : 
面 中 除了 可 以 使 用 白色 作为 背景 外 ， 也 可 以 搭配 辅 色 ， 加 ; 粉色 可 以 给 人 甜美 、 可 爱 的 感觉 ， 与 白色 搭配 更 加 突出 粉色 ; 
整个 页 面 的 质感 ， 给 人 以 严肃 的 感觉 。 9 艳丽 ， 但 是 用 在 产品 宣传 网 页 中 ， 过 于 缺乏 严肃 、 正 规 的 ; 
， 显 得 有 些 矫 抒 造作， 缺乏 稳重 和 信任 ， 色彩 意向 严重 


使 用 白色 作为 背景 ， 提 高 了 整个 页 面 的 明度 。 使 用 视觉 刺 
上 的 活跃 气氛 。 激 强烈 的 橙色 作为 主 色 ， 使 主体 看 起 来 非常 引 人 注 目 。 
@ 搭配 深 紫色 为 主 色 ， 在 背景 中 如 镶嵌 于 黄金 项 链 上 的 紫色 ; @) 在 极 小 范围 将 视觉 刺激 强烈 的 深 红色 分 布 于 页 面 左边 ， 

钻石 一 般 , 给 人 高 贵 而 神秘 的 印象 , 且 很 好 地 突出 了 主体 。 ; 。 起 到 了 很 好 的 引导 作用 ， 同 时 为 整个 页 面 增加 了 一 丝 神 
@ 搭配 小 范围 黑色 作为 辅 色 ， 使 整个 页 面 更 加 深沉 、 稳 重 。 秘 气氛 。 
搭配 白色 的 文字 让 整个 页 面 配色 雅致 的 同时 ， 不 缺乏 生动 ; 3) 灰色 的 文字 散布 于 整个 页 面 ， 为 活跃 的 页 面 添 加 了 一 丝 稳 


无 邪 的 可 黄色 9 


查 黄色 是 一 种 色相 柔和 的 色彩 ， 它 有 着 天 真 烂漫 的 孩子 般 的 无 那 ， 在 设计 中 使 用 杏 黄色 能 够 表 
达 出 一 种 喜悦 而 舒畅 的 感觉 ， 如 图 8-3 所 示 。 


sEpjoy-“the Ehicy The 


ed Lite oo0d Life!” Food tifter 


el 1588.5678 | | 
S93”  。 ， 该 网 页 中 的 可 黄色 给 人 以 柔和 民 ， 

| 意 的 感觉 黑色 和 红色 的 点 级 增 | 
RE 一 ， 加 了 偶 牙 的 气息 。 | 


朴素 的 浅 土 色 


浅 土 色 是 一 种 明度 较 低 的 颜色 ， 给 人 一 种 朴素 而 又 温和 的 感觉 ， 通 常 窗帘 或 靠垫 等 日 常 纺 织 生 
活用 品 的 颜色 就 用 浅 土 色 。 在 设计 配色 中 ， 比 较 容易 与 其 他 色彩 相 搭配 ， 能 够 给 人 一 种 典雅 的 感觉 ， 
且 不 会 影响 其 他 色彩 效果 ， 如 图 8-4 所 示 。 


Ech bb 


,该 网 页 使 用 了 太阳 楼 和 浅 土 色 作 | 
， 为 主 色 和 青 景色， 在 给 人 温暖 的 
， 同 时 多 了 一 份 典 牙 。 | 


图 8-4 


女 配 色 案 例 21: 动画 片 主 题 网 页 


制作 一 个 电影 动画 网 页 ， 往 往 要 通过 电影 的 风格 来 决定 网 页 的 风格 。 要 决定 一 
个 网 页 的 风格 ， 合 理 掌 握 色彩 搭配 效果 是 非常 重要 的 。 下 面 通过 本 网 页 的 色彩 搭配 


> #0 sr 


dl 信者 各 全 训 寺 忆 于 和 训 下 尖 守 罗网 风 同性 


! 
! FLASHCLUB 首页 。 国内 热 喘 环球 新 片 。 佳 片 发 现 预告 片 。 海报 刷 关 精彩 影评 


人。 飞 国 环 游 ”类 卫 卡 是 佳 动因 长 上 
UP2009 页 国 吧 学 沉 加 全 芭 


REN 


up wat 

dn 

-Car Goes Up 》 
There Dog Dosh 


申 六 关 作 : 中 图 上 和 电 氏 汪 届 寺 
TY 


《 飞 悍 环 游记 》 高清 完 吾 版 


回 设计 分 析 

人 将 白色 作为 整个 页 面 的 背景 色 ， 营 造 出 明快 的 气氛 。 网 页 的 主 色 也 就 是 主题 图 片 的 颜色 为 浅 
土 色 ， 给 人 以 温和 的 印象 ， 符 合 网 页 主题 内 容 特 征 。 

@ 搭配 明度 较 高 的 天 蓝 色 , 给 人 以 温馨 、 欢 快 的 感觉 。 浅 灰色 的 文字 与 整个 页 面 的 氛围 相 呼 应 ， 
给 人 带 来 温暖 、 轻 松 的 感觉 。 
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;第 3 步 : 插入 文字 和 图 片 。 


rrr 


FLASHCLUB gm 。 园林 。 使 片 室 各。 窟 千 片 。 关中 号。 网 六 


FAs FLASHCLUB gi 。 同村 上 有 及。 而 告 片 。 并 摘出 国 。 精彩 


时 本 和 记 


TN 
ao。 ”天 人 
er 


er sxmaszhz， 
i RN 
ma 


乌 姓 刻 遂 砂 


句 ”延伸 方案 


可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 
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| 配色 评价 : | 配色 评价 ; 
| 背景 颜色 与 页 面 左边 的 绿色 和 矩形 条 统一 ， 使 其 与 背景 呼应 于 | 在 与 影视 相关 的 题材 中 使 用 黑色 也 是 常见 手法 ， 很 多 时 候 其 
| 整个 页 面 ， 给 人 以 轻松 的 感觉 | 至 会 营造 出 一 种 酷 炉 的 感觉 以 及 神秘 的 格调 ， 但 是 用 在 动画 ; 
1 片 主题 网 页 中 毫 无 活跃 感 


第 8 章 橙色 系 的 应 


名 ”相同 色 系 应 用 于 其 他 网 页 


FT 和 


应 用 于 艺术 设计 网 页 


1@ 以 灰暗 的 深蓝 色 作为 背景 色 , 使 整个 页 面 看 起 来 非常 稳重 , ' D) 页 面 将 深海 的 蓝 色 作为 背景 色 , 营造 了 神秘 而 沉稳 的 效果 ， 
同时 给 人 一 种 神秘 而 又 高 贵 的 感受 。 ! ”给 人 一 种 清凉 而 稳重 的 感觉 。 搭 配 大 面积 浅 土 色 作 为 主 色 ， 
将 明度 较 高 的 浅 土 色 作为 主 色 ， 质 朴 中 带 着 华丽 ， 主 题 突 ， 。 突出 主题 ， 使 页 面 看 起 来 有 凉爽 而 温馨 的 感觉 ， 为 页 面 营 


出 又 给 人 以 新 颖 的 感觉 。 

3) 引入 明度 较 低 且 范围 较 小 的 深 红色 ， 惹 人 注目 却 不 会 对 视 
觉 产 生 很 强 的 刺激 性 ， 同 时 为 页 面 添加 了 活泼 、 轻 松 的 
。 搭配 褐色 文字 ， 使 整个 页 面 效 果 坚 实 。 


| 


2) 搭配 少许 深 红色 作为 辅 色 ， 不 仅 点 级 了 页 面 ， 并 以 其 刺眼 
的 颜色 特征 衬托 主题 的 耀眼 度 。 

3) 明度 稍 低 一 点 的 文字 很 好 地 弥补 了 主体 轻浮 的 颜色 特点 ， 
使 整个 页 面 看 起 来 轻快 、 灵 活 的 同时 ， 不 失 稳重 效果 。 


洲 


造 了 活跃、 欢快 的 气氛 。 | 


坚实 的 咖啡 色 Dp 


咖啡 色 是 一 种 明度 低 的 色彩 ， 很 容易 与 其 他 色彩 相 搭配 ， 通 常用 在 时 装 的 下 装 和 立体 设计 的 基 


础 部 分 ， 如 图 8-5 所 示 。 


， 这 是 一 个 咖啡 让 网页， 使 用 咖啡 
， 色 做 主 色 ， 与 产品 理念 做 到 高 度 


图 8-5 


.8.6 隆安 定 的 过 外 2) 


棕色 也 称 为 茶色 ， 是 一 种 很 容易 与 其 他 色彩 相 搭配 的 颜色 ， 可 以 用 在 任何 色彩 搭配 中 。 棕 色 给 
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人 安全 、 安 定 和 依赖 的 印象 。 它 象征 着 土地 的 颜色 , 是 一 种 具有 传统 气息 的 色彩 ， 适 合用 于 表现 庄重 、 
雅 的 气氛 ， 如 图 8-6 所 示 。 


Maraarm Koranor 和 


， 该 网 页 中 使 用 棕色 ， 与 主 图 上 的 | 
| 古典 风景 表达 一 致 , 体现 了 传统 、| 
| 十 相 典 雅 和 经 久 不 衰 的 特质 。 | 


图 8-6 


案例 22: 高 档 西 餐厅 网 页 


近年 来 ， 随 着 东西 方 文化 的 相互 交融 ， 各 类 西餐 厅 如 雨后春笋 般 渐渐 崛 


[sy 
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回 


#edd77f , #eaelb1 


情 关 村 向 。。 逢 方 守 ”。 全 了 天 于 要 站。 。 康生 和 


> 0 er 


人 @ ”设计 分 析 


@ 咖啡 色 通 常 给 人 的 印象 是 欧美 宫廷 风格 的 高 贵 和 优雅 ， 所 以 常用 于 欧美 风格 的 室内 设计 的 主 


色调 ， 给 人 以 稳重 的 感觉 ， 同 


时 散发 着 一 种 高 贵 、 优 雅 的 气质 。 它 也 可 以 用 在 食品 网 页 设计 中 ， 接 


近 巧 克 力 的 颜色 , 在 营造; 


言 -由 
司 内 一 


@ 深 棕色 的 铺垫 散发 


雅 气氛 的 同时 , 也 可 以 增强 人 们 的 食欲 , 给 人 一 种 不 可 抗拒 的 诱惑 力 。 


出 高 贵 而 稳重 


突 元 ， 为 页 面 增添 活力 的 
(3) 将 金黄 色 作为 辅 色 


个 页 面 ， 为 页 面 增添 了 一 丝 活跃 而 灵动 的 气氛 ， 使 整个 页 


名 ”绘制 步骤 


第 1 步 : 插入 背景 和 Logo。 


的 气质 。 以 咖啡 


司 时 ， 让 人 垂 省 和 欲 滴 。 
色 ， 散 发 着 华丽 


为 主 色 的 美食 图 片 ， 既 突出 主题 又 不 显得 


与 高 贵 的 气息 。 浅 黄色 的 文字 与 页 面 正中 央 的 画 框 呼应 于 整 


看 起 来 轻盈 、 不 沉重 。 


第 2 步 : 


插入 主题 


:第 3 步 给 制 底部 信息 导航 栏 的 形状 。 步 : 在 信 


和 @ ”配色 方案 


#2d1d3b ! #6a4b23 


#a57b5c 


和 片 和 素材 元 素 。 


#90a1 6c #6a4b23 


#6a4b23 #7b7852 


Photoshop CC 网 页 配色 设计 全 程 揭秘 (第 2 版 ) 


回 延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


;配色 评价 
| 可 以 将 棕色 换 为 相同 纯度 的 蓝 色 。 这 种 颜色 是 一 种 雍容 华丽 ; 红色 是 食品 行业 经 常 应 用 的 一 种 颜色 ， 可 以 促进 人 的 食欲 ， 
| 的 色彩 , 加 上 粗粮 的 质感 ,同样 可 以 表现 出 复古 高 贵 的 感觉 。 ; 但 并 不 是 西方 人 偏爱 的 颜色 ， 3 当 明 


BB reoune 


AOG SPACLS Loss friction, be 


Present compositions with ea 


,VISIPOUB BLOGEOR THE- 
ST DIEhsz 


] 应 用 于 质朴 和 典雅 风格 的 网 
将 明度 较 低 的 深 棕色 作为 背景 色 ， 给 人 以 沉稳 的 感觉 。 深 : 用 小 面积 的 黑色 与 大 范围 的 咖啡 色 搭配 ， 既 突出 了 主体 ， 又 
沉 的 咖啡 色 作为 主体 颜色 ， 同 样 沉稳 而 又 表现 出 安定 、 古 , 加 强 了 色彩 的 质感 。 加 入 一 抹 绿 色 ， 增 加 了 页 面 的 活跃 度 。 
雅 、 高 级 的 感觉 。 白色 的 文字 与 页 面 中 的 白色 色 块 相 呼应 ， 使 页 面 看 起 来 不 


鲜艳 的 红色 给 人 食欲 的 同时 , 使 整个 页 面 看 起 来 更 加 华丽 。 
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9 


9.1 磊 开放 的 鲜 黄 色 


鲜 黄色 是 一 种 明度 较 高 的 色彩 。 这 种 明快 .积极 的 颜色 让 人 感觉 鲜艳 、 耀 眼 ,也 可 以 令 人 食欲 大 增 ， 


被 用 于 食品 题材 的 设计 。 


图 9-1 所 示 。 


食品 行业 中 常 被 用 来 与 红色 、 楼 f 
如 


在 网 页 设计 中 使 用 鲜 黄色 可 以 体现 欢乐 、 活 跃 的 积极 情绪 ， 给 人 以 醒目 、 积 极 向 上 的 印象 ， 在 


色 和 粉色 等 高 纯度 的 暖色 进行 搭配 , 通常 可 以 有 效 调 动 浏览 者 的 食欲 ， 


该 网 页 使 用 了 大 量 的 鲜 黄色 ， 显 | 
得 格外 鲜艳 、 溜 眼 ， 与 Logo 和 ， 
主体 的 红色 形成 鲜明 对 比 。 


图 9-1 


将 鲜 黄色 运用 在 网 页 设计 中 ， 可 以 体现 网 页 的 个 性 风格 ， 给 人 以 欢快 、 活 跃 的 
色调 与 明度 低 的 冷色 调 相 搭 配 ， 可 以 给 人 以 醒目 、 靓 
丽 而 积极 向 上 的 感觉 。 下 面 一 起 学 习 如 何在 网 页 配色 设计 中 使 用 鲜 黄色 。 


积极 情绪 ， 将 这 种 鲜艳 的 明亮 


案例 背景 


案例 类 型 
群体 定位 
表现 重点 


明艳 风格 的 商务 网 页 设计 


客户 群体 
给 人 以 光明 、 希 望 的 印象 ， 符 合 商务 网 页 主题 内 容 特征 
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#1b0b30 | #010101 


@ ”设计 分 析 

人 鲜 黄 色 是 一 种 醒目 的 颜色 ， 散 发 出 快乐 、 希 望 、 动 感 的 气息 。 将 这 种 色相 鲜艳 的 颜色 运用 在 
网 页 设计 中 ， 可 以 很 好 地 表达 活跃 和 时 尚 个 性 的 感觉 。 

@ 将 白色 作为 背景 颜色 ， 为 整个 页 面 制造 出 明快 的 气氛 ， 给 人 眼前 一 亮 的 感觉 。 鲜 亮 的 黄色 可 
以 突出 主题 ， 又 不 会 与 背景 颜色 产生 突 元 感 。 

@@ 使 用 深 紫色 作为 辅 色 ， 突 出 主题 的 同时 为 页 面 添加 了 一 丝 神秘 气息 。 搭 配 页 面 下 方 的 黑色 文 
字 ， 使 页 面 获 得 等 重 的 呼应 ， 给 人 以 稳重 的 感觉 。 
回 绘制 步骤 


第 4 步 : 输入 界面 文字 内 容 ， 


回 配色 方案 


回 ”延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


Sn nll a 


整个 页 面 只 是 小 范围 使 用 黄色 ， 靠 其 艳丽 明亮 的 特征 给 人 
以 醒目 的 感觉 。 

2) 搭配 高 纯度 的 黑色 ， 再 辅 以 浅 灰 色 的 背景 ， 使 整个 页 面 看 
起 来 疏 密 有 致 、 灵 动 轻盈 ， 同 时 又 不 失 端 庄 。 

页 面 浅 灰色 的 背景 与 明度 较 高 的 黄色 搭配 , 柔和 而 又 轻巧， 
使 整个 页 面 看 起 来 明亮 许多 。 文 字 颜 色 与 背景 颜色 的 反差 
恰到好处 ， 很 好 地 装点 了 页 面 。 
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| 应 用 于 食品 饮料 网 页 : : 
1 GD 整个 页 面 给 人 以 强烈 的 视觉 冲击 力 。 使 用 鲜 黄色 到 栓 色 的 | 
渐变 作为 背景 ， 两 种 较为 醒目 的 颜色 互相 搭配 ， 突 出 活力 | 
“的 同时 ， 给 和 人 以 强烈 的 视觉 籼 激 。 

| @ 将 艳丽 的 黄色 与 深 红色 搭配 ， 给 人 强烈 视觉 刺激 的 同时 ， 
| 又 令 人 食欲 大 增 。 加 入 黑色 的 文字 为 整个 页 面 营造 出 一 种 
活跃、 欢快、 轻盈 的 感 党 。 


幸福 的 含羞 草 色 p 


含羞 草 色 能 够 表现 出 天 生 自然 的 意象 。 这 种 颜色 的 名 称 取 自 一 种 植物 的 颜色 ， 有 一 种 活力 和 生 
机 勃 勃 的 跃 动 感 。 与 黄色 一 样 ， 这 种 颜色 可 以 让 人 联想 到 幸福 。 在 配色 设计 中 ， 这 种 颜色 与 暖色 系 
冷色 系 或 中 间 色 调 都 可 以 搭配 ， 如 图 9-2 所 示 。 


然 的 燕 衣 草 色 和 草绿 色 , 更 ， 
0 突出 天 生 自然 的 印象 ， 使 任 ， 
何 颜色 作为 小 面积 的 点 组 都 很 ， 


自然 的 含羞 草 色 和 草绿 色 ， 更 能 突出 自然 的 印象 ， 给 人 轻松 、 愉 悦 的 视觉 体验 。 
由 于 含羞 草 色 明度 较 高 ， 使 用 任何 颜色 都 可 以 作为 点 缀 色 。 

在 旅游 网 页 中 使 用 了 大 面积 的 含羞 草 色 ， 整 个 页 面 给 人 一 种 幸福 、 充 满 活力 、 
el 给 人 一 种 沉稳 、 自 然 的 视觉 感受 。 


第 9 章 黄色 系 的 应 用 


回 ”设计 分 析 
@ 将 含羞 草 色 与 栖 色 渐变 作为 背景 ， 融 合 两 种 颜色 的 优点 ， 为 整个 页 面 添加 了 幸福 、 温 声 并 且 
有 活力 的 跃 动感 。 


@ 使 用 同 为 黄色 系 的 更 浅 的 黄色 作为 主 色 ， 突 出 页 面 内 容 ， 使 人 感觉 到 纯洁 的 气息 。 


(@ 小 范围 的 深 褐 色 与 黑色 的 文字 相 搭配 ， 起 到 了 压制 的 作用 ， 使 整个 页 面 看 起 来 活跃 而 又 不 失 
稳重 。 
人 句 绘制 步骤 
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回 ”延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


| 配色 评价 : ; 配色 评价 


| 用 栓 红 色 作 为 背景 颜色 ， 突 出 主题 的 同时 ， 以 强烈 的 视觉 冲 | 中 间 使 用 大 片 的 品 红色 ， 整 个 页 面 对 比 强烈 ， 品 红色 成 功 吸 
| 击 力 刺激 浏览 者 的 大 脑 ， 留 下 深刻 印象 。 ! 引 了 浏览 者 的 目光 ， 但 却 不 能 表现 重点 ， 另 一 方面 ， 使 主体 ， 


Ma eal Sim | sl 


Se 


应 用 于 影音 产品 网 页 应 用 于 亲子 网 页 
| 中 利用 神色 同色 系 中 不 同 的 色相 变化 作为 主 色 , 突出 立体 感 ，; GD) 整个 页 面 以 含羞 草 色 为 主 色 ， 与 背景 、 文 字形 成 中 间 色 相 


1 ”给 人 以 轻盈 、 温 声 的 感觉 。 ! “搭配 ， 营 造 出 自然 、 和 谐 的 氛围 ， 同 时 突出 主题 。 
1@ 加 入 整 片 含羞 草 色 ， 增 添 活跃 、 动 感 的 气氛 。 同 时 搭配 中 ; @ 加 入 白色 给 人 天 使 般 纯洁 的 感觉 ， 草 绿色 和 浅 褐色 作为 辅 | 
! ， 间 色调 ， 为 整个 页 面 营造 出 一 种 悠闲 的 意境 ， 给 人 一 种 放 ， 色 ， 使 页 面 表现 出 丰富 、 华 丽 、 不 单调 的 效果 。 整 个 页 面 ; 


松 的 感觉 。 与 主体 相同 颜色 的 文字 ， 呼 应 整个 页 面 ， 制 造 ;给 人 感觉 村 素 而 大 方 、 简 洁 而 丰富 。 
出 自然 、 和 谐 的 气氛 。 : | 


第 9 章 黄色 系 的 应 有 


生动 的 铭 黄色 


铭 黄 是 一 种 略 偏 橙 色 的 黄色 ， 明 度 略 低 于 纯 黄色 ， 色 彩 意象 也 从 热情 张扬 变 为 健康 活力 ， 表 现 
出 一 种 运动 的 感觉 。 在 网 页 设计 中 ， 将 这 种 颜色 作为 基本 色 来 使 用 ， 会 给 人 一 种 积极 健康 、 活 力 
射 的 感觉 ， 非常 适合 年 轻 态 的 主题 表达 ， 如 图 9-3 所 示 。 


， 背景 色 使 用 黑色 ， 显 得 黄色 更 黄 ，， 
， 更 加 突显 了 张扬 感 和 运动 感 ， 加 ， 
， 上 白色 的 加 入 ， 对 比分 明 ， 个 性 ， 
| 十 足 。 | 


图 9-3 


闪耀 的 香槟 黄 只 


香槟 黄 给 人 的 感觉 像 香 槟 的 泡沫 一 样 会 轻快 地 裂 开 。 这 种 明亮 、 清 澈 的 色彩 最 能 突出 黄色 所 具 
备 的 智慧 光芒 。 使 用 邻近 色 的 暖色 调 搭配 香槟 黄 ， 可 以 表现 出 一 种 轻快 的 感觉 。 在 网 页 设计 中 ， 将 
这 种 颜色 作为 基本 色 来 使 用 ， 会 给 人 以 充满 希望 的 印象 ， 如 图 9-4 所 示 。 
< 力 = TDT 口 闪 LAMINI 困 出 大 
几 毛 之 "二 工 口 一 


商人 色 b\ 扩 岂可 彩 如 天 上 一 h 忆 一 分 1 
> 电 上 上 迁 考研 tv 体 上 日。 


， 这 是 一 个 汽车 销售 网 页 ， 其 中 使 ， 
， 用 了 大 量 的 香槟 黄 与 黑色 搭配 ， | 


me ， 在 体现 高 端的 同时 变 得 醒目 - 


六 配色 案例 25: 精致 的 美食 网 页 配色 


本 案例 将 设计 一 个 美食 网 页 ， 一 定 要 注意 在 色彩 搭配 上 不 仅仅 只 是 要 美观 那么 
简单 ， 还 要 让 浏览 者 感到 有 食欲 。 下 面 详细 了 解 一 下 香槟 黄 的 具体 配色 方法 和 色 块 
布局 方式 。 
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精致 的 美食 网 页 设计 


香槟 黄色 由 少量 黄色 和 大 量 的 白色 调配 而 成 ， 它 的 明度 | ! 
所 以 它 也 受到 白色 的 影响 ， 给 人 一 种 纯洁 的 感觉 ! 


: #b2d08 


pS 


回 设计 分 析 
GD 使 用 橙色 作为 美食 网 页 的 主 色 ， 让 人 有 食欲 大 增 的 感觉 。 
@ 采用 小 范围 的 红色 和 绿色 作为 辅 色 ， 起 到 了 很 好 的 点 缀 效果 ， 使 整个 页 面 看 起 来 色彩 丰富 
@ 香槟 黄 的 背景 营造 了 明快 的 气氛 ， 给 人 以 轻快 、 放 松 的 感觉 。 

铝 绘制 步骤 


I 喘 拓 Ys se 


句 ”延伸 方案 


应 用 


路 


pr 


证 于 


) 整个 网 页 以 香槟 黄 与 白色 渐变 搭配 作为 背景 色 ， 突出 页 面 : 以 不 同 明度 的 黄色 作为 背景 色 ， 为 页 面 添加 了 空间 感 ， 给 
的 层次 感 ， 营 造 出 和 谐 的 气氛 , 给 人 以 干净 、 爽 朗 的 感觉 。; 。 人 以 神秘 而 又 深奥 、 清 凉 而 又 明亮 的 感觉 。 
将 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


) 站 红 和 黄 的 配色 在 食品 行业 中 十 分 常用 ， 既 能 通过 高 对 比 度 ， 
吸引 浏览 者 的 眼球 ， 也 能 引起 人 们 的 食欲 , 然而 在 “ 精 : 
的 要 求 上 ， 却 是 一 种 需要 谨慎 处 理 的 色彩 搭配 。 

) 使 用 红色 作为 背景 色 ， 色 彩 的 位 置 、 过 渡 和 和 斜 切 处 理 得 均 


化 收 品 网 页 : 1 应 用 于 包装 食品 网 页 : 


其 特性 完全 相反 的 低调 象牙 色 ， 不 仅 突出 主题 ， 而 且 为 页 ， ”地 突出 主题 ， 给 人 以 眼前 一 亮 的 感觉 。 

面 营造 了 活跃 、 张 扬 的 气氛 ， 同 时 小 范围 的 主 色 使 页 面 看 ; (3) 页 面 中 使 用 绿色 作为 辅助 ， 突 出 健康 食品 的 主题 ， 同 时 

起 来 沉稳 而 不 单调 、 华 贵 而 不 庸俗 。 1 ”页 面 看 起 来 色彩 丰富 但 不 杂乱 ， 不 会 显得 主题 颜色 与 背景 
(3 将 零散 、 刺 眼 的 鲜红 色 均 匀 分 布 在 整个 页 面 中 ， 使 其 在 整 ， ”颜色 相 冲 突 。 

人 给 人 以 甜蜜 、 清 透 的 ;@ 白色 的 文字 为 页 面 添 加 了 活跃 、 明 快 的 气氛 ， 给 人 一 种 欢 


同色 系 中 显示 张扬 个 性 的 大 范围 黄色 作为 辅 色 ， 搭 配 与 ; @ 与 其 邻近 色相 搭配 ， 给 人 以 无 法 抗拒 的 食欲 感 ， 同 时 很 好 
使 


童话 般 的 淡 黄色 5 


设计 9 


淡 黄色 色相 清淡 而 温柔 ， 给 人 感觉 如 奶油 般 的 柔和 与 甜 密 。 这 是 一 种 非常 招 人 喜爱 的 色彩 ， 在 
即使 大 范围 使 用 ， 也 不 会 让 人 感到 过 于 刺激 或 单调 ， 反 而 会 使 人 心情 放松 。 


淡 黄色 也 是 一 种 让 人 感觉 非常 温暖 的 颜色 ， 通 常 像 室内 灯光 会 采用 这 种 柔和 的 颜色 ， 使 人 心情 


加 
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放松 ， 给 人 温馨 的 感觉 ， 如 图 9-5 所 示 。 
“TH ~ i 


Inplus story 


BwELcowE PREVIEW TOUR GUDE BESERVATION COMMUNITY 


,该 网 页 中 使 用 淡 黄色 作为 背景 ， 
a eo ， 色 ， 整 个 页 面 简单 、 温 和 。 拱 配 ， 
et 1 提名 黄色 和 青色 ， 


i 到 ss 


图 9-5 


I 
© 
淡 黄色 通常 运用 在 休闲 类 的 网 页 设计 色彩 搭配 中 ， 可 以 表现 出 一 种 悠然 自得 的 
效果 。 下 面 通过 对 一 个 休闲 食品 网 页 的 制作 ， 继 续 对 淡 黄色 在 网 页 设计 中 的 搭配 效 
果 进 行 详细 分 析 。 


案例 类 型 ， 休闲 食品 网 页 设计 1 


廊 本 1 26: 休闲 食品 网 页 配色 


1 治 黄 色 的 背景 与 纯度 很 高 的 咖啡 色 搭配 ,能 够 表现 孩童 般 纯真 的 感觉 搭配 低 纯 度 、 
! 低 明度 的 色彩 ， 可 以 表现 出 华贵 、 优 美的 氛围 | 


#899f45 ， #767676 


i 


EPETEEST 


@ ”设计 分 析 

全 淡 黄色 由 一 定量 的 白色 与 黄色 调配 而 成 , 同时 集合 两 种 颜色 的 优点 , 既 有 白色 给 人 的 明亮 感 ， 
又 有 黄色 给 人 的 轻快 感 ， 所 以 特别 招 人 喜爱 。 

@ 使 用 小 面积 的 淡 黄 色 与 大 范围 的 白色 作为 背景 色 ， 使 整个 页 面 明亮 却 不 刺眼 。 

@ 使 用 咖啡 色 作为 主 色 ， 带 给 人 一 种 可 口 的 诱惑 感觉 ， 同 时 弥补 了 大 片 白色 给 页 面 造 成 的 空 
旷 感 。 


[my 


@ 利用 草绿 色 作 为 辅 色 ， 丰 富 了 页 面色 彩 效果 ， 浅 灰色 的 文字 加 重 了 页 面色 彩 质量 ， 使 页 面 看 
起 来 稳重 、 不 轻浮 。 


- 
ON 一 一 
2 二 你 本 A 办 


句 延伸 方案 


可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


将 主 色 与 淡 黄色 搭配 作为 渐变 背景 色 ， 突 出 页 面 层次 感 
同时 不 会 像 白色 一 样 看 起 来 有 轻飘飘 的 感觉 。 

为 了 使 页 面 下 方 的 深 色 背景 不 影响 文字 阅读 ， 最 好 能 够 大 自然 ， 但 应 用 于 该 网 页 ， 与 主 图 和 产品 理念 不 统一 。 
下 方 的 文字 换 成 浅 色 。 
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@” 相 同色 系 应 用 于 其 他 网 页 


;应 用 于 女 鞋 销售 网 页 : ! 应 用 于 科技 类 网 页 : 
人 玫 人 则 页 的 黄玉 和 和 的 二 人 为人 | 人 用 名 发 玫 个 页 面 层次 丰富 ,| 
感觉 闪 烩 而 季 和 。 拱 配 大 面积 的 淡 黄 色 作 为 主 色 ， 缓 | 主题 明确 ， 体 现 出 积极 、 热 闷 的 氛围 。 页 面 中 搭配 大 片 洲 
和 了， 使 而 体 呈 和 条 、 沁 汉 | “灰色 ， 给 人 以 沉稳 、 质 村 的 感觉。 : 
@ 加 入 少许 的 同色 系 高 明度 的 黄色 作为 辅 色 ， 为 整个 页 面 ; @ 小 范围 的 蓝 色 和 青色 ， 使 页 面色 彩 更 加 丰富 ， 给 浏览 者 ; 
添加 了 欢快 、 活 跃 的 旋律 ， 给 人 以 轻柔 、 如 家 一 般 温 声 |。 带 来 科技 感 。 橙 色 活跃 了 整个 页 面 气氛 ， 使 页 面 看 起 来 
的 感 党 。 不 单调 。 | 
(@ 深 粉 色 的 文字 弥补 了 因 背 景色 范围 小 而 造成 的 空 虑 感 ，; @) 黑色 的 标题 背景 ， 增 加 了 页 面 的 神秘 感 和 层次 ， 将 导航 清 

与 背景 色相 呼应 而 又 减缓 了 红色 给 人 造成 的 视 党 疲劳，; 。 晰 地 呈现 出 来 。 


苹果 绿 正如 青 苹果 一 样 清爽 ， 那 青 涩 的 稚嫩 让 人 心情 变 得 格外 明朗 。 它 代表 着 健康 与 生命 ， 所 
以 经 常用 于 与 自然 、 健 康 和 教育 相关 的 网 页 。 

苹果 绿色 调 明 朗 、 青 春 , 与 原色 、 间 色 搭配 , 给 人 开朗 、 豪放 的 印象 ; 与 邻近 色 搭配 , 呈现 出 悠然 、 
异 意 的 印象 ， 与 补 色 或 分 离 互 补 色相 搭配 ， 会 呈现 一 种 和 谐 、 舒 适 的 感觉 ， 如 图 10-1 所 示 。 


| 该 网 页 中 的 苹果 绿 与 铬 黄色 搭 ， 
| 配 ， 给 人 清新 、 自 然 、 活 小 的 感 | 
， 觉 ， 蓝 色 和 白色 增添 了 纯净 、 欢 | 
| 乐 的 感觉 。 


图 10-1 


翡翠 绿 象征 着 希望 ， 给 人 鼓舞 ， 同 时 也 展现 出 一 种 强大 的 生命 力 。 翡 殿 绿 中 包含 少量 的 青色 ， 
散发 着 翡翠 一 般 温润 的 气质 ， 在 视觉 上 不 会 给 人 强烈 的 刺激 感 ， 在 网 页 设计 中 被 广泛 使 用 。 


翡翠 绿 是 由 等 量 的 青色 与 黄色 混合 而 成 ， 给 人 内 全 的 印象 。 与 同类 色 搭 配 ， 可 以 呈现 出 华 
丽 的 气息 和 健康 的 自然 氛围 ; 与 对 比 色 搭配 ， 使 人 感觉 轻松 、 优 雅 ， 又 流露 出 希望 ， 如 图 10-2 
所 示 。 


一 


， 萌 翠绿 与 黄色 拱 配 可 以 给 人 一 种 | 
,轻松 的 感觉 ， 与 白色 拱 配 更 突显 | 
,页 面 的 纯净 和 清新 。 


交配 色 案 例 27 


该 案例 是 一 款 游戏 网 页 ， 整 个 页 面 以 平稳 的 翡翠 绿 为 主 ， 能 表现 出 自然 界 的 和 
平 与 希望 。 与 邻近 色 的 搭配 ， 带 来 了 缓和 、 舒 适 的 感觉 。 没 有 过 多 艳丽 的 色彩 ， 但 
却 很 好 地 突显 了 平和 、 温 润 的 感觉 。 


ee 绿色 到 莫 浴 绿 的 ; 平和 、 温 润 的 氛围 ， 清 夹 、 规则; 
; 的 排版 干脆 利落 ， 银 灰色 显得 更 加 有 质感 ， 产 生 一 种 别具一格 ! 


回 ”设计 分 析 
@ 大 面积 使 用 绿色 ， 给 人 以 平稳 、 理 智 的 印象 。 与 邻近 色 的 搭配 ， 呈 现 出 友好 、 和 平 的 态度 ， 
巧妙 地 安排 白色 的 布局 ， 给 人 耳目 一 新 的 感受 。 
@ 不 同 纯度 的 绿色 经 过 巧妙 的 组 合 ， 营 造 出 一 个 清爽 的 世界 ， 增 添 了 愉悦 的 气氛 。 


136 
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mm 多 


| 步骤 
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| 配色 评价 : ; 配色 评价 : ; 
| 可 以 将 绿色 换 为 邻近 的 青色 。 蓝 色 到 青色 的 渐变 色 能 够 构建 将 表 景 色 设置 为 深 庆 色 , 可 以 很 好 地 突出 绿色 ， 且 感 观 千 适 ， 
| 出 非常 出 色 的 空间 感 ,配合 前 景 中 半 透 明 的 框 体 , 时尚 感 十 足 。; 但 给 人 过 于 厚重 的 印象。 | 


;应 用 于 电子 产品 类 网 页 : ! 应 用 于 品牌 饮品 网 页 : 

! 大 面积 的 翡翠 绿 传达 出 理智 、 果 断 的 印象 ， 白 色 的 文字 与 背 | 翡翠 绿 在 背景 的 衬托 下 ， 显 得 更 加 清新 自然 ， 与 同色 系 搭配 表 
| 景 ， 使 页 面条 理 清晰 ， 整 体 显得 自然 、 和 平 ， 用 于 电子 产品 ; 现 出 整体 的 和 谐 统一 ， 营 造 出 健康 、 自 然 、 和 谐 的 氛围 ， 符 合 
| 类 的 网 页 中 ， 更 加 具有 说 服 力 。 


清新 的 黄 绿 色 5 | 


黄 绿色 比较 容易 与 其 他 颜色 搭配 ， 搭 配 暖色 系 的 深 绿色 与 褐色 ， 非 常 引 人 注目 。 与 多 种 明度 较 
高 的 多 元 色彩 相 搭配 ， 表 现 一 种 欢乐 的 氛围 ， 在 白色 的 背景 下 ， 显 得 更 加 清新 自然 ， 表 达 对 美好 、 
自由 生活 的 向 往 和 追求 ， 如 图 10-3 所 示 。 


该 册页 中 的 黄 绿色 显得 清新 自 ， 
， 然 ， 与 生命 力 旺 盛 的 绿色 和 白色 | 
| 措 配 , 给 人 以 美好 、 向 上 的 感觉 。 | 


图 10-3 


太 配 色 案例 28: 广告 类 网 页 配色 人) 


该 案例 页 面 中 使 用 白色 作为 背景 ， 搭 配 不 同 纯度 的 绿色 ， 使 页 面 呈 现 色调 统一 
的 效果 ， 非 常 明快 。 再 搭配 褐色 和 黑色 ， 页 面 风格 和 谐 统 一 ， 主 题 突 出 ， 给 人 一 种 
无 限 遐 想 与 梦幻 般 的 感觉 。 


138/ 


回 ”设计 分 析 
@ 黄 绿 色 比较 容易 与 其 他 颜色 搭配 ， 该 案例 中 搭配 深 绿色 和 褐色 ， 页 面 风格 保持 一 致 
@ 在 白色 的 背景 下 ， 页 面 显得 更 加 清新 自然 ， 表 达 对 美好 、 自 由 生活 的 向 往 和 追求 。 
@@ 红色 与 黄色 作为 点 缀 色 ， 让 人 感觉 温暖 、 和 舒服， 展现 出 一 幅 安 静 、 祥 和 的 美好 画面 。 

@ ”绘制 步骤 
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回 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


0 : 


| 配色 评价 : 
! 可 以 将 天 空白 云 背 景 改 为 常规 的 天 蓝 色 ， 岛 屿 也 随 之 改变 色 
; 调 ， 否 则 大 面积 的 绿色 和 蓝 色 搭配 会 产生 不 协调 感 。 


但 缺少 层次 感 ， 主 图 过 


! 应 用 于 水 果 类 网 页 
;CD 大 面积 的 黄 绿色 既 艳丽 又 明亮 ， 给 人 新 鲜 、 健 康 的 感觉 
符合 该 类 网 页 的 主题。 


使 平淡 的 页 面 更 加 饱满 , 彰显 了 温和 、 亲 切 、 自 然 的 氛围 。 


| 应 用 于 生活 类 网 页 : ! 
! 大 面积 采用 绿色 系 搭配 组 合 ， 营 造 出 轻松 的 环境 ， 让 人 身心 ! 
! 放松 ， 仿 佛 能 感受 到 阳光 的 滋润 和 花草 的 芳香 。 


昂扬 的 浓 绿色 2 


浓 绿 色 是 和 平 的 色彩 ， 具 有 镇 静 和 抑制 亢奋 的 作用 ， 能 够 安抚 人 的 心灵 ， 令 人 感到 舒适 。 浓 绿 
色 是 翡翠 绿 加 少许 的 红色 和 黑色 调和 而 成 ， 色 调 平稳 ， 纯 度 偏 低 ， 给 人 一 种 和 谐 、 融 洽 的 感觉 。 


第 10 章 绿色 系 的 应 用 


浓 绿色 与 同类 色 、 邻 近 色 搭配 ， 能 够 带 给 人 和 舒 爽 、 缓 和 的 心情 ， 与 原色 、 间 色 、 复 色 搭配 ， 能 
展现 出 张扬 、 奔 放 的 个 性 ， 让 人 印象 深刻 ;与 补 色 搭配 ， 能 展现 一 幅 充 裕 、 富 侯 的 景象 ， 如 图 10-4 
所 示 。 


THE PRINTING AND 


， 该 网 页 中 的 浓 绿色 衬托 了 黄 绿色 ， 
|， 和 梁 绿 色 的 新 鲜 自然 ， 并 起 到 了 | 
| 调和 的 作用 ， 让 人 感觉 舒适 。 | 


太 配 色 案 例 29: 保险 行业 网 页 配色 


浓 绿色 间 夹 杂 着 大 红色 ， 营 造 出 苍凉 的 情景 ， 在 背景 的 衬托 下 ， 整 个 页 面 又 流 
露 一 丝 冷 农 ， 表 达 人 们 对 幸福 的 渴望 。 


和 @ ”设计 分 析 

@ 绿色 是 自然 和 谐 的 颜色 ， 显 得 富有 生机 ， 给 人 安心 舒服 的 感觉 。 搭 配 灰色 的 背景 给 人 一 种 富 
有 品位 的 印象 。 

@ 点 缀 奔放 的 红色 ， 显 得 十 分 营 人 注目 ， 给 人 成 熟 的 感觉 。 加 入 黑色 ， 增 添 了 深 之 的 魅力 。 


| 


Photoshop CC 网 页 配色 设计 全 程 揭秘 (第 2 版 ) 


the in 


ernetiore 


《 本 4 


账 
上 
二 
忌 
© 


#3d7d53 


x 不 推荐 的 配色 方案 


色 方案 


已 


V 可 延伸 的 而 


;配色 评价 ;配色 评价 : : 
;使 用 浓 绿色 与 灰色 作为 背景 ， 整 体感 觉 和 谐 统一 ， 红 色 块 与 ;红色 可 以 给 人 危险 感 ， 但 表现 得 过 分 或 过 多 ， 就 会 给 人 造成 ; 
| 其 形成 了 对 比 ， 但 并 不 显得 突 7 ; 到 帆 的 感觉 : 


© ren EE El 


| 应 用 于 商业 类 网 页 ， ; 应 用 于 绿茶 品牌 网 页 : : 
| 大 面积 使 用 浓 绿色 非常 适用 于 商业 网 页 ， 给 人 一 种 老练、 成 ; 浓 绿色 与 同色 系 措 配 , 让 人 感觉 针 适 、 悠 闲 , 想 要 亲近 大 自然 ，; 


稚嫩 的 浅 绿色 2 


浅 绿色 纯度 适中 , 明度 极 高 , 由 少量 的 青色 与 绿色 调和 而 成 。 浅 绿色 有 很 强 的 中 立 性 , 给 人 安静 、 
新 鲜 、 清 爽 和 稚嫩 的 感觉 。 又 让 人 感觉 到 安静 中 多 了 一 份 窖 达 ， 给 人 亲近 柔和 的 印象 。 

浅 绿色 与 邻近 色 或 同类 色 搭配 , 会 给 人 优雅 、 淡 然 的 舒畅 感觉 与 对 比 色 搭 配 , 会 让 人 眼前 明亮 ， 
展现 出 美好 动人 的 风采 ; 与 互补 色 搭 配 ， 可 以 营造 安定 、 和 舒适 的 氛围 ， 如 图 10-5 所 示 。 


0 ER ~ [< 人 | 该 网 页 中 明度 和 纯度 不 同 的 绿色 | 
~ 者 对 = 二 ， 搭配 ， 自 然 、 协 调 、 统 一 ， 呈 现 | 
| 出 健康 、 积 极 、 安 定 的 氛围 。 | 


有 清新 干净 的 意味 ， 象 征 健康 、 希 望 。 
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ce 


大 面积 使 用 浅 绿色 作为 背景 ， 并 加 以 明度 的 变化 ， 创 建 出 富有 层 ; 次 的 视觉 效果 -| 
苹果 绿 的 点 缀 强化 了 页 面色 调 ， 描 绘 了 一 幅 如 仙境 般 美 好 的 页 面 : 


GD 大 面积 的 浅 绿色 作为 页 面 的 背景 ， 给 浏览 者 一 种 稚嫩 、 清 透 、 凉 爽 的 感觉 。 

@ 与 苹果 绿 搭配 ， 能 展现 产品 青春 时 尚 的 气息 ， 散 发 出 宁静 、 清 新 的 特质 ， 并 很 好 地 增加 了 页 
面 的 层次 感 。 

G) 页 面 焦 点 图 采用 了 米黄 色 的 主 图 ， 与 浅 绿 色 搭配 ， 风 格 统一 ， 主 题 明确 ， 能 够 很 好 地 展现 产 
品 的 特质 。 


名 绘制 步骤 


入 


ECO ° ECO + | 


片 ， 创 建 蒙 版 。 : 输入 文字 内 容 ， 并 使 用 线条 和 图 片 装 饰 页 面 。 


加 配色 方案 
| 生机 自然 : 
;  #aacf52 |) #5a100 |; #66b97 :| #9c3el | #0831f |  #aac52 | 
: 萌动 幼稚 : 
; Woe6g2 | aac52 |; #bed30 ; #958c | Haac52 |  #zeb3d | 
加 ”延伸 方案 


W 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


; 配色 评价 : ! 
| 蓝 色 的 天 空 使 页 面 的 亮度 提高 ， 再 配 以 绿色 ， 让 浏览 者 能 够 ; 棕色 虽然 在 家 居 行业 是 常用 的 颜色 ， 但 多 用 来 体现 古典 与 品 ; 
;充分 享受 到 大 自然 的 新 鲜 空气 ， 使 人 的 心情 夫 然 开朗 。 | 质 ， 一 般 不 会 被 用 于 体现 现代 感 的 产品 。 1 
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@@ ”相同 色 系 应 用 于 其 他 网 页 


! 应 用 于 儿童 主题 网 ! 应 用 于 旅游 主题 网 
! 这 是 一 个 儿童 教育 网 页 ， 运 用 柔和 的 浅 绿色 作为 背景 色 ， 给 , 背景 采用 从 深 绿色 到 浅 绿 色 的 自然 过 渡 ， 页 面 清新 而 柔和 。 
! 人 方便 、 安 定 的 感觉 。 绿 色 象征 着 希望 、 健 康 ， 充 满 生机 。 ; 添加 纯洁 的 白云 图 片 作为 点 级 ， 共 同 营造 柔美 和 谐 的 氛围 ， 
! 页 面 既 展现 出 孩子 的 稚嫩 可 爱 ， 也 给 人 清新 和 活力 的 感觉 。 ; 令 人 心情 舒畅 


10.6 轩 [高贵 的 孔 省 绿 ? 


孔 八 绿 拥有 像 孔 省 一 样 的 高 贵 与 优美 ， 给 人 一 种 精美 和 有 品位 的 感受 。 孔 八 绿 是 由 青色 迭 入 一 
定量 的 绿色 调和 而 成 ， 纯 度 和 明度 都 适中 ， 不 浓艳 ， 不 疏离 ， 也 不 黯淡 ， 透 露出 一 股 舒 适 的 感觉 ， 
如 图 10-1 所 示 。 

与 同类 色 、 邻 近 色 搭配 ， 表 现 出 一 种 宁静 、 自 然 、 和 谐 的 气息 ， 与 对 比 色 搭配 ， 可 以 展示 出 秀 
丽 美好 的 效果 ;与 互补 色 搭 配 ,给 人 一 种 活跃 、 友 好 的 感觉 体现 对 生活 的 积极 性 ， 如 图 10-6 所 示 。 


， 静 、 舒 适 的 感觉 ， 深 绿色 的 加 入 
， 增添 了 深沉 感 ， 黄 色 和 亮 绿色 为 | 
， 页面 增添 了 活跃 气氛 。 | 
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第 @ 剖 蓝 色 系 的 应 用 p 


蓝 色 给 人 镇 定 、 庄 重 、 理 智 的 印象 ， 同 时 又 给 人 冰冷 的 感觉 ， 使 人 联想 到 大 海 、 湖 水 和 天 空 。 蓝 色 
象征 青春 、 成 功 、 正 直 和 信用 等 ， 被 大 量 应 用 于 商业 性 网 页 。 


冷静 的 天 蓝 色 D 


清新 透彻 的 天 蓝 色 总 能 让 人 联想 到 广阔 的 天 空 ， 让 人 觉得 开放 自由 。 微 凉 的 色 感 给 人 沉着 冷 


之 感 ， 运 用 到 设计 中 可 以 展现 出 理智 正规 的 气质 。 
天 蓝 色 与 不 同 明度 的 蓝 色 系 色彩 进行 搭配 ， 能 够 传达 出 清醒 冷静 、 果 断 理智 的 效果 ， 与 纯度 高 
的 色彩 进行 搭配 ， 让 人 心情 舒畅 ， 营 造 了 健康 、 活 泼 的 氛围 ， 如 图 11-1 所 示 。 


名 


在 大 
OriVT ?no 二 弛 2 确 


| 


宁静 的 天 蓝 色 和 草绿 色 给 人 清 | 
， 新 、 自 由 的 感觉， 既 透 彻 又 夹 朗 ，， 
| 与 洁净 的 白色 搭配 ， 能 安抚 人 的 ， 
| 心灵 。 1 


PENSION cn es Wo 


图 11-1 


清澈 的 水 蓝 色 只 


水 蓝 色 如 同 清澈 的 河水 ， 让 人 心旷神怡 ， 水 蓝 色 色调 明亮 ， 总 给 人 一 种 生机 勃勃 的 感觉 ， 适 
于 夏 日 饮品 类 网 页 或 广告 中 ， 清 澈 的 色相 展现 出 滋润 、 凉 爽 的 感觉 ， 在 烈日 炎炎 的 夏 日 带 给 人 一 丝 
凉意 。 

水 蓝 色 与 同色 系 搭配 , 给 人 一 种 温和 、 清爽、 洁净 的 感觉 与 对 比 色 搭配 , 能 够 表现 出 一 种 时 尚 感 ， 
如 图 11-2 所 示 。 
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| 配 ， 给 人 温和 、 清 夹 的 感觉， 加 | 
， 入 自 色 和 黑色 ， 多 了 一 份 正式 和 ， 


RE 
图 11-2 
太 配 色素 例 31: 体育 类 网 页 配色 (全) 


通过 红 、 绿 、 蓝 三 色 进 行 组 合 ， 在 白色 的 映衬 下 ， 顿 时 页 面 热闹 起 来 ， 让 人 联 
想起 热烈 精彩 的 足球 赛场 , 大 胆 的 配色 洋溢 着 青春 别 样 的 风采 ,将 人 的 激情 调动 起 来 。 


@ ”设计 分 析 
GD 红色 的 背景 强烈 刺激 着 浏览 者 的 视觉 系统 ， 加 入 等 面积 的 水 蓝 色 ， 增 强 了 页 面 的 对 比 和 视觉 
冲突 ， 吸 引 浏览 者 的 注意 。 
@ 绿色 作为 点 级 色 在 红色 的 衬托 下 更 具 活 力 ， 能 为 浏览 者 带 来 充分 的 愉悦 感 ， 页 面 整体 给 人 昂 
扬 的 斗志 和 挑战 的 动力 。 
@ 白色 的 背景 下 使 用 灰色 的 文字 ， 既 保证 了 整体 页 面 的 色调 ， 又 提高 了 文字 的 可 读 性 。 
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”延伸 方案 
V 可 延伸 的 配色 方案 
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! 配色 评价 : ! 
| 页 面 中 大 面积 的 水 蓝 色 给 人 清 吏 怡 人 的 感觉 但 颜色 太 过 单 
;一 ,在 衬托 主 图 的 同时 也 有 降 品 的 作用 ,页 面 显得 过 于 沉静 。 


Probably the best 
beer in the world 


应 用 于 夏 日 饮品 闫 网 页 | 应 用 于 文 创 产品 网 页 : | 

| 清 现 的 蓝 色 ， 让 人 联想 到 海洋 的 这 阅 与 民意 ， 页 面 中 使 用 了 ; 水 蓝 色 给 浏览 者 带 来 轻松 、 明 快 的 印象 。 加 入 橙色 、 红 色 和 

| 局 部 的 绿色 ,搭配 具有 视觉 传导 性 的 冰 块 图 片 , 给 人 一 种 清 蛮 、 绿色 的 点 级 ， 使 页 面 更 加 活 泌 。 灰 色 青 景 的 衬托 ， 使 页 面 皇 
| 现 出 一 种 典雅 的 文学 气质 。 


深蓝 色 有 较 高 的 纯度 ， 给 人 一 种 冷静 、 简 洁 。 它 不 仅 拥有 蓝 色 系 的 镇 定 、 冷 静 、 理 智 等 
特征 ， 还 具备 冷酷 、 正 派 的 特点 有 办公， 二 关于 和 能 够 给 人 留 下 稳重 与 理智 的 印象 ， 
如 图 11-3 所 示 。 


ee 从 Wrowe Copia 
Wma 


nUnion 
WaesSirength 


深蓝 色 再 加 入 一 些 黑色 ， 与 中 灰 ， 
,和 白色 相 撕 配 ， 给 人 一 种 害 智 、 
| 干练、 正式、 专业 性 十 足 的 感受 。 | 


图 11-3 
深蓝 色 属 于 高 纯度 的 色彩 ， 与 同类 色 、 邻 近 色 搭 配 ， 更 能 袁 显 出 其 幽深 、 智 慧 的 色相 特征 ; 与 


对 比 色 搭配 ， 会 呈现 出 奋发 向 上 的 效果 ， 激 发 人 的 积极 性 。 


温馨 的 浅 蓝 色 2 
浅 蓝 色 是 由 少量 青色 与 黄色 调和 而 成 的 色彩 ， 适 合作 为 过 渡 色 。 浅 蓝 色 与 同类 色 、 邻 近 色 措 配 ， 


第 11 章 ， 蓝 色 系 的 应 用 


能 表现 出 清爽 、 洁 净 的 感觉 与 对 比 色 搭 配 ， 能 营造 出 滕 胱 而 美好 的 页 面 ， 给 人 一 种 梦幻 般 的 感觉， 
如 图 11-4 所 示 。 


， 浅 蓝 色 也 称 婴 儿 蓝 ， 一 般 被 认为 | 
， 是 男孩 的 颜色 ， 与 浅 桃色 措 配 
， 体 现 出 纯洁 与 天 真 ， 红 和 绿 的 加 | 
| 入 给 人 温暖 和 健康 的 感觉 


太 配 色 案例 32: 饮 售 网 页 配色 @) 


饮食 类 网 页 通常 使 用 红色 、 橙 色 或 者 黄色 这 些 具 有 口感 的 颜色 。 但 这 些 颜 色 也 
会 给 人 喧闹 、 烦 躁 的 感觉 ， 当 表现 西餐 类 食物 时 ， 可 以 使 用 浅 蓝 色 、 米 黄色 这 些 饮 
和 度 不 高 的 冷色 调 颜色 突显 西餐 的 特点 与 品位 。 


健康 、 干 净 的 印象 ， 搭 配 小 面积 
好 地 呈现 出 来 ， 同 时 又 不 会 突 元 


四 


LUUeelas Menu 2 
Uw 


一 Sale 
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回 ”设计 分 析 
人 采用 浅 蓝 色 与 同色 系 搭配 作为 背景 ， 显 得 格外 温馨 、 和 舒适 。 
@ 在 背景 的 衬托 下 ， 作 为 补 色 的 橙色 显得 格外 耀眼 ， 一 些 红色 的 点 缀 ， 表 现 出 了 健康 、 自 然 的 
@) 棕色 文字 的 使 用 既 集 成 了 橙色 和 红色 的 口感 ， 又 很 好 地 降低 了 与 浅 蓝 色 背 景 颜色 的 冲突 。 
9 绘制 步骤 


句 延伸 方案 
-可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


| 配色 评价 ， 色 评价 : | 
使 用 明亮 的 查 色 作为 青 景 ， 给 人 热情 、 温 暖 的 感觉 ， 适 用 于 红色 可 以 给 人 危险 感 ， 但 表现 得 过 分 或 过 多 ， 就 会 给 人 造成 
| 饮食 类 网 页 。 配 以 鲜明 的 食品 图 片 ， 能 够 引起 用 户 的 兴趣 。 


| 应 用 于 儿童 类 网 页 ， | 应 用 于 卡通 类 网 页 
| 大 面积 的 浅 蓝 色 ， 带 给 人 温 声 、 抚 慰 ， 与 清爽 的 绿色 和 蓝 色 ; 浅 蓝 色 的 天 空 ， 带 给 人 清爽、 透 彻 的 感觉 ， 营 造 出 一 种 干净 、 

并 配 ， 让 人 感 沉 清 洲 和 明亮 。 扫 情 的 模 色 和 黄色 ， 使 页面 更 ; 明朗 的 气氛 。 妈 绿色 与 红色 的 措 配 表现 出 动态 的 交 果 ， 鲜 明 的 | 
| 加 丰富 多 彩 ， 营 造 出 轻松 、 随 意 的 气氛 。 | 色彩 使 页 面 充满 了 活力 。 | 


只 


蔚蓝 色 有 着 纯净 、 清 爽 的 色相 , 犹如 万 里 晴空 的 色彩 ,让 人 感到 空旷 .辽阔 , 给 人 舒适 、 放 松 的 心情 。 
同时 蔚蓝 色 拥有 蓝 色 的 理性 特征 ， 流 露出 洗 练 的 感觉 ， 适 用 于 商务 类 网 页 ， 如 图 11-5 所 示 。 
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蔚蓝 色 是 高 纯度 的 蓝 色 ， 与 自 色 ， 
搭配， 给 可爱、 纯粹、 美好 的 
印象 ， 粉 红色 和 绿色 的 点 组 显得 ， 
， 灵活 多 彩 。 


图 11-5 
蔚蓝 色 与 同色 系 、 相 近 色 搭配 ， 呈 现 出 可 爱 、 朝 气 的 印象 ， 与 原色 、 间 色 、 复 色 措 配 ， 会 呈现 
出 生气 十 足 的 印象 ， 与 对 比 色 搭配 ， 呈 现 出 一 幅 优 美 、 随 意 的 页 面 。 


六 配色 案例 3 项 目 网 页 配色 


该 案例 中 大 面积 的 蔚蓝 色 给 人 清凉 、 冰 冷 的 感觉 ， 与 同类 色相 搭配 ， 表 现 出 整 
体 统一 的 效果 。 加 以 红色 的 点 级 ， 可 以 表现 出 一 种 动态 的 美感 。 


色 系 的 水 蓝 色 搭配 ， 表 现 多 层次 的 搭配 效 j 
果 。 灰 色 的 介入 ， 能 够 更 好 地 体现 冰雪 运动 的 魅力 


第 1 总 攻克 用 


@@ ”设计 分 析 

中 纯度 高 的 蔚蓝 色 清凉 感 比 较 强 ， 像 水 一 样 ， 有 一 种 冰凉 和 清 透 的 效果 ， 蔚 蓝 色 与 灰色 搭配 ， 
构成 了 一 个 冰凉 的 世界 ， 令 人 心旷神怡。 

@ 黑色 和 灰色 的 点 级 ， 可 以 很 好 地 表现 冰雪 运动 的 冰冷 魅力 。 局 部 使 用 红色 点 级 ， 可 以 很 好 地 
表现 出 一 种 动态 的 美感 。 


绘制 图 标 ， 插 入 图 片 和 文字 。 
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句 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


配色 评价 : | 
| 将 页 面 中 的 导航 颜色 由 灰色 修改 为 栖 黄 色 。 与 蓝 色 形成 很 强 | | 将 页 面 青 景 的 颜色 由 灰色 修改 为 柱 黄 色 。 等 面积 的 两 种 颜色 
| 的 视觉 对 比 的 同时 ， 也 很 好 地 增加 了 页 面 的 动感 | 发 生 了 强烈 的 视觉 碰撞 ， 浏 览 者 会 感到 无 所 适 从 。 | 


应 用 于 工业 类 网 页 
| 该 页 面 中 使 用 丰富 的 色彩 展 


下 了 深刻 的 印象 。 


镇 静 的 深 青 


青色 有 着 镇 定 的 特性 ， 这 种 色彩 可 以 缓解 忙碌 而 紧张 的 生活 。 青 色 中 含有 少量 的 红色 ， 正 是 红 
色 使 青色 具有 蓝 色 的 平缓 和 镇 静 ， 所 以 非常 适合 用 于 休闲 类 网 页 ， 使 人 心情 得 到 放松 和 清净 ， 如 
图 11-6 所 示 。 


| BE 


| 深 青 色 与 浅 青色 搭配， 给 人 一 种 | 
: | 闪烁 的 科技 感 ， 呈 现 出 梦幻 、 灵 ， 
FE | 动 和 神秘 的 感觉。 | 


图 11-6 
青色 与 同类 色 、 相 近 色 搭配 ， 呈 现 出 辽阔 、 深 远 而 神秘 的 效果 ， 与 原色 、 间 色 、 复 色 搭配 ， 呈 
现 出 鲜艳 夺目 、 神 采 飞 扬 的 效果 在 灰色 调 中 ， 则 会 呈现 一 幅 苍 劲 有 力 、 意 味 深长 的 页 面 。 


六 配色 案例 34: 简洁 的 游戏 类 网 页 配色 et 


| 案例 背景 : 
E ; 使 用 深 青色 和 浅 青色 搭配 ， 表 现 页 面 的 神秘 感 。 搭 配 玫 红 色 ， 对 比 强烈， 
增加 页 面 的 诡异 感 


oa 


回 设计 分 析 

GD 青色 搭配 同色 系 共同 营造 出 空 呈 、 神 秘 的 氛围 ， 使 其 呈现 一 种 立体 感 。 

@ 在 背景 的 衬托 下 ， 玫 红色 散发 出 神秘 的 气息 ， 显 示 出 细腻 、 和 柔和 的 质感 ， 使 暗 浊 的 色调 体现 
出 奇幻 的 神秘 之 感 。 

(@ 用 少许 白色 增添 了 平静 和 沉稳 感 ， 给 人 一 种 精彩 绝伦 的 视觉 感 。 


二 
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名 ”绘制 步骤 

I WELCOME 

:第 3 步 ; 括 入 核心 图 上 ,并 完 修饰 。 ，，，，，、、 第 4 步 : 完成 页 面 装 人 图 上 的 制作 。 

的 "es 

WELCOME 

加 本 jj 守 
和 丰 言 | 
| 
1 强力 独 | 


回 ”相同 色 系 应 用 于 其 他 网 页 


rows | pour 


! 应 用 于 商务 网 页 1! 应 用 于 数码 配件 网 页 : 
! 大 面积 的 青色 让 人 觉得 镇 定 ， 并 且 拥有 真诚 的 内 在 和 从 容 的 ; 蓝 色 总 是 让 人 联想 到 科技 ， 使 用 青色 使 页 面 显 得 老练 成 熟 ， 
， 一 些 红色 的 加 入 ， 给 人 理智 、 洗 练 的 印象 ， 同 时 吸引 ; 给 人 信任 感 。 在 青色 的 衬托 下 ， 白 色 显 得 更 加 洁净 、 大 方 ， 
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[2 三 这 紫色 系 的 应 用 p 


紫色 是 一 种 神秘 而 美丽 的 色彩 。 自 古 以 来 ， 就 是 尊贵 和 身份 的 代名词 。 故 宫 称 为 “紫禁城 ”, 古 
罗马 仅 有 贵族 才 被 允许 穿着 紫色 服饰 ， 而 在 基督 教 中 ， 紫 色 则 代表 至 高 无 上 和 来 自 圣灵 的 力量 。 


清纯 的 丁香 紫 2 


ie di 
散发 着 青 涩 的 柔美 气息 ， 甚 为 车 人 怜爱 ， 如 图 12-1 所 示 。 


RA ， 使 用 清淡 的 本 香 紫 村 托 主 产品 的 | 
颜色 ， 层 次 分 明 且 协调 一 致 ， 黑 ， 
， 色 和 灰色 的 加 入 增加 了 品质 感 。 
图 2 
丁香 紫 是 一 种 清新 而 纯美 的 颜色 ， 充 满 着 浪漫 而 柔美 的 气息 。 这 种 颜色 是 由 紫色 大 幅度 降低 纯 
度 而 得 到 的 ， 紫 色 的 华丽 和 贵 气 得 到 了 抑制 和 减弱 ， 取 而 代 之 的 是 一 种 小 家 眉 玉 的 清新 柔美 感 。 


友 配 色 案例 35: 甜点 网 页 配色 


本 案例 主要 制作 了 一 个 清爽 干净 的 甜点 页 面 ， 页 面 使 用 深浅 不 一 的 丁香 紫 作 为 
主 色调 ， 配 合 色 彩 温暖 明亮 的 图 片 和 文字 ， 整 个 页 面 显 得 无 比 清新 、 和 柔美， 仿佛 整 
个 视觉 和 味觉 都 已 沉浸 在 甜美 的 味道 中 。 


案例 背景 图 片 作为 焦点 图 ， 强 调 了 温暖 而 亲 和 
觉 。 文 字 颜 色 采用 了 白色 和 略 深 的 紫色 ， 提升 了 整体 | 


协调 统一 性 , 


ARANGE OF BEAUTIFULLY 
DECORATED CUPCAKES 


加 设计 分 析 

人 GD 页 面 采 用 白色 作为 背景 色 ， 不 同 明度 的 丁香 紫 则 被 用 来 分 割 不 同 的 功能 区 ， 整 个 页 面 呈 现 出 
清爽 、 明 净 的 感觉 ， 而 且 具 有 一 定 的 空间 感 和 景深 感 。 

@ 页 面 中 多 次 使 用 丁香 紫 到 白色 的 渐变 色 作 为 背景 ， 并 巧妙 地 与 前 景 中 的 图 片 和 文字 相 结合 ， 
强调 出 页 面 的 空间 感 。 

(@) 页 面 中 的 其 他 辅助 性 色彩 同样 选用 了 一 些 色调 柔美 温和 的 颜色 ， 既 能 起 到 点 缀 页 面 的 作用 ， 
又 能 保证 色彩 的 协调 性 。 
名 绘制 步骤 


RE 


| 
ARANGE OF BEAUTIFULLY 1 ARANGE OF BEAUTIFULLY 
x DECORATED CUPCAKES ! DECORATED CUPCAKES 
= 
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加 配色 方案 


ARANGE OF BEAUTIFULLY 
< DECORATED CUPCAKES 


ARANGE OF BEAUTIFULLY 
KR DECORATED CUPCAKES 3 
eee rae nd heseh pornied aaken 


可 以 将 页 面 主 色 改 为 同色 系 的 粉 案 色 ， 同样 可 以 表现 出 页 面 ; 大 量 的 蓝 色 有 清 透 的 感觉， 应 用 在 食品 页 面 中 ， 更 适合 冷食 
| 柔美 天 密 的 感觉 。 相 应 的 按钮 颜色 也 要 改变 。 | 或 冷饮 ， 应 用 在 此 处 ， 缺 乏 刊 腻 感 。 


| 应 用 于 女性 用 品 网 页 ， | 应 用 于 儿童 玩具 网 页 | 
; @ 丁香 紫 是 一 种 温和 妩媚 的 颜色 ， 有 着 很 明显 的 女性 特征 ，; 中 该 页 面 以 稍 偏 蓝 一 些 的 丁香 紫 作 为 背景 表现 出 甜蜜、 清 ; 


| 。 在 女性 化 站 品 和 甜点 网 页 中 常用 。 | 。 凉 的 感觉 
| @ 整个 页 面 是 以 浅 浅 的 丁香 紫 为 主 色调 ， 背 景 还 采用 了 极 具 | @) 前 同样 采用 村、 挤 绿 和 粉红 等 温 明 的 闻 色 一 种 夏 日 ; 
| 。 女性 气质 的 花 采 来 烘托 气氛 ， 一 种 柔美 、 轻 松 的 感觉 扑面 ”的 清 夹 感 呼之欲出 。 
| 而 来 。 i@ 页 面 中 的 文字 很 少 。 大 片 可 妥 的 卡通 类 插图 使 页 面 执 亲 无 
; @) 采用 同色 系 的 艳丽 紫色 作为 辅 色 ， 以 提高 页 面 的 协调 感 ，; 。 比 ， 使 人 有 强烈 的 点 击 欲望 | 
| 。 黑色 的 文字 极 易 阅读 。 ! | 


神圣 的 正 紫色 p 


紫色 是 高 贵 神圣 的 颜色 。 紫 色 混合 了 红色 和 蓝 色 ， 所 以 它 的 色彩 意向 兼 具 红色 的 华丽 高 贵 和 蓝 


第 12 章 紫色 系 的 应 折 


色 的 冷淡 疏远 ， 给 人 以 可 远 观 而 不 可 褒 玩 的 距离 感 ， 如 图 12-2 所 示 。 单 独 使 用 紫色 可 以 表现 出 神圣 
感 ， 与 高 纯度 的 色彩 搭配 使 用 ， 则 可 以 表现 出 华丽 感 。 


#8b4899 


| |#d1did 
该 网 页 中 的 紫色 和 灰色 的 搭配 体 
现 了 品质 和 高 贵 的 印象 ， 蓝 色 和 
绿色 给 人 科技 创新 的 感觉 。 


图 12-2 


”低调 华丽 的 深 紫色 


与 紫色 比 起 来 ， 深 紫色 更 显 低调 而 端庄 ， 就 像 一 位 隐藏 在 暗 处 的 女皇 ， 即 使 不 处 于 众人 目光 的 


深 紫 色 由 紫色 降低 明度 而 来 ， 但 仍 保持 原始 的 高 纯度 。 紫 色 是 一 种 妩媚 而 又 庄重 的 色彩 ， 如 果 
说 粉红 色 代表 妩媚 , 桃红 色 代 表 妖 娆 , 那么 紫色 就 代表 华贵 ,是 贵族 和 权力 的 象征 。 紫 色 的 明度 降低 后 ， 
这 些 意象 仍然 存在 ， 同 时 又 显得 更 加 低调 沉稳 、 耐 人 寻味 ， 很 多 有 实力 的 大 企业 更 喜欢 使 用 深 紫 色 
作为 网 页 的 主 色 ， 如 图 12-3 所 示 。 


TRIANA 


#é Be 


|#afaabo 


配色 | 
#FffF 


[#9154b3 | 
深 紫色 的 妩媚 给 人 以 奢华 的 印 
象 ， 黑 色 增加 了 庄重 感 ， 淡 紫色 
和 白色 的 融入 给 人 以 绚丽 丰富 的 


感觉 。 


本 案例 是 一 款 华丽 的 手机 页 面 。 该 页 面 中 各 种 元 素 的 用 色 和 特殊 效果 都 非常 简 
单 ， 但 十 分 精致 ， 制 作 时 要 拿捏 好 尺度 。 


| 一 


案例 类 型 手机 网 页 设计 
群体 定位 ' 数码 爱好 者 、 手 机 用 户 
二 采用 深 兹 色 作为 页 面 的 背景 色 ， 营 造 出 神秘 低调 而 大 气 高 贵 的 感觉，; 
] ; 精美 的 图 像 和 紧凑 的 排版 方式 表现 出 一 种 恰到好处 的 正规 和 品质 
; 感 ， 白 色 云 采 图 案 的 应 用 和 铬 黄 、 青 色 两 种 色彩 的 点 睛 ， 使 深 色 背 ; 
; 景 带 来 的 沉 闯 感 一 扫 而 空 | 
;主要 色相 深 紫色 、 铬 黄色 、 青 色 、 白 色 的 
色彩 印象 ”; 科技 、 神 秘 、 低 调 


加 设计 分 析 


( 该 页 面 采 用 了 深 紫色 作为 主 色调 。 深 紫 色 是 通过 降低 红 紫 色 的 明度 得 来 的 。 明 度 大 幅 降 低 后 
红 紫 色调 具有 的 轻 做 感 被 抑制 ， 色 彩 意象 趋向 于 高 贵 和 端庄 。 

@ 为 了 防止 低 明 度 的 色彩 过 于 沉闷 ， 页 面 中 多 次 使 用 青色 、 铬 黄 等 活泼 的 颜色 ， 既 起 到 平衡 页 
的 作用 ， 又 增加 了 页 面 的 科技 感 。 


绘制 步骤 
| 第 1 步 ， 填充 渐变 背景 和 圆 角 矩 形 。 1 第 2 步 ， 输入 文字 ， 制 作 导航 栏 ， 插 入 图 片 并 输入 其 他 


| 内 容 。 


回 配色 方案 
敏锐 明知 ; 
! #432f79 ! #6677b9 ! #1587af ! #432f79 ! #728cba ! #895335 ! 
| WO He pi 觅 天 | 
#432f79 Es #c7e8fa 1 #65a9dd #432f79 !  #e6e6e6 | #65a9dd ! 
回 延伸 方案 


V 可 延伸 的 配色 方案 


DD 


配色 评价 

了 黄色 和 紫色 是 对 比 色 ， 给 人 以 强烈 的 刺激 感 ， 当 页 面 中 只 
有 一 小 部 分 黄色 时 ， 这 部 分 黄色 看 上 去 会 更 耀眼 。 

) 将 4 个 按钮 移 到 页 面 上 方 ， 手 机 的 位 置 稍 作 调整 ， 以 保证 ; @ 当 紫 色 和 黄色 在 页 面 中 的 占 比 都 比较 大 时 ， 黄 色 部 分 反而 

页 面 留 白 。 调 整 后 的 文字 、 黄 色 图 标 和 4 个 按钮 将 不 再 对 ; ”不 会 那么 突出 ， 而 且 整 体 上 多 了 些 动感 的 感觉 ， 而 在 这 款 

齐 ， 增 加 了 页 面 布局 性 。 页 面 中 ， 黄 色 会 让 主 


@” 相 同色 系 应 用 于 其 他 网 页 


色 评价 
) 可 以 将 页 面 中 的 蓝 色 图 标 调整 为 紫色 ， 使 页 面 基调 颜色 更 
接近 ， 提 高 了 页 面 的 协调 性 。 


S| 


! 应 用 于 女性 美容 美体 网 页 : 
1@ 页 面 采 用 深 紫色 作为 主 色调 ， 比 起 粉红 色 来 说 少 了 一 些 轻 ; 中 页 面 整体 看 来 显得 正规 而 庄重 ， 尽 管 使 用 了 大 面积 的 紫色 
1 估 ， 多 了 几 分 端庄 低调 。 1 ”和 玫 红 色 ， 但 却 没有 一 丝 女 性 的 柔美 。 

!@ 为 了 降低 深 色 的 沉 问 感 ， 页 面 使 用 大 量 的 白色 平衡 色彩 。 ; @ 由 于 直线 和 多 边 形 反复 排列 带 来 的 视觉 感受 ， 这 里 的 紫红 


流线型 的 运用 强调 了 流动 感 和 柔美 感 。 色调 主要 是 用 来 打破 版 式 的 刻板 。 


雅致 的 曹 蒲 色 p 


质 的 曹 蒲 色 最 适合 展现 雅致 的 特质 。 它 与 白色 搭配 可 以 表现 


3 洒 
二 
饥 
了 
镜 
号 
浊 
汝 
IT 
时 
[Uy 
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搭配 能 够 产生 很 好 的 协调 感 ， 搭 配 少量 的 明艳 色彩 则 会 显得 个 性 十 足 ， 如 图 12-4 所 示 。 


该 页 中 大 面积 铺 汪 月 哺 丰 同 的 | 
， 曹 薄 色 ， 神 秘 与 妩媚 间 带 着 清 透 | 
， 的 感觉 ， 黄 色 的 加 入 使 整个 页 面 ， 
2 ee 
图 D4 
曹 薄 色 中 蓝 色 比 红色 的 成 分 略 少 ， 所 以 妩媚 的 效果 略 低 ， 理 性 和 疏离 感 略 占 上 风 ， 整 体 呈现 出 
一 种 雅致 的 感觉 。 明 度 相 对 较 低 ， 有 效 压制 了 其 独 有 的 张扬 和 惹眼 ， 使 曹 蒲 色 更 加 理性 和 优雅 。 


本 案例 是 一 款 清 爽 的 电子 产品 页 面 。 页 面 中 的 元 素 很 少 ， 而 且 文 字 也 全 部 拆 分 
为 小 块 状 进行 排版 ,另外 页 面 中 的 色 块 都 是 比较 规则 的 形状 , 也 没有 过 于 明显 的 高 光 、 
投影 等 逼真 的 拟 物 效果 ， 是 一 款 很 漂亮 的 扁平 化 作品 。 


pp 


; 表现 重点 局 方 式 使 最 简单 的 色 块 和 最 普通 的 文字 瞬间 拥有 了 最 大 化 的 表现 方式 
; 整个 页 面 效果 严 襄 合 理 而 又 舒畅 通 透 


Start accepting orders today 


Setup a professional storefiont whin minutes. 
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@ ”设计 分 析 
中 该 案例 使 用 白色 作为 整个 页 面 的 背景 色 ， 用 一 块 营 薄 色 作为 焦点 图 的 背景 ， 整 体 效果 极为 协 
调 简洁 。 
@ 页 面 中 的 营 薄 色 是 唯一 的 艳 色 ， 而 且 每 块 营 薄 色 的 大 小 都 不 同 ， 排 列 得 错落 有 致 ， 保 证 了 页 
面 的 整体 一 致 性 和 局 部 灵活 性 。 
人 句 绘制 步骤 


| 第 1 步 : 创建 页 面 整体 布局 。 :制作 导航 栏 ， 插 入 主题 图 片 。 


ASCEND 人 


made easy 


© | ©) 


1 
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回 ”延伸 方案 
可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


! 配色 评价 : ! 配色 评价 : | 
| GD 可 以 将 紫色 改 为 高 明度 的 青色 。 青 色 中 不 包含 任何 的 红色 , ;中 QD 如 果 仅仅 是 从 色彩 结构 上 看 ， 该 页 面 使 用 绯红 色 ， 温 暖 而 ; 
所 以 页 面 中 艳丽 典雅 的 感觉 会 褪 尽 ， 更 加 突显 出 商务 感 和 ， ”烂漫 ， 是 中 国 传统 色彩 之 一 ， 给 人 以 积极 向 上 的 火热 感 。 | 
理智 感 。 | @ 尽管 绯红 色 在 应 用 上 不 失 美观 ， 但 是 与 电子 产品 所 需要 的 ; 
@ 也 可 以 在 页 面 最 下 方 添加 一 条 同色 的 色 条 ， 宽 度 最 好 与 按 ， 。 科技 感 和 害 智 感 毫 无 关联 ， 神 秘 感 、 豁 智 感 全 无 ， 很 难 引 
钮 相同 。 这 块 青色 将 与 上 方 的 青色 块 呼应 ， 使 页 面 结构 更 ; 起 人 们 对 电子 产品 的 兴趣 和 理解 。 
完整 。 | 


;应 用 于 移动 设备 网 页 ! 应 用 于 购物 类 网 页 : 
站 采用 大 上 上 深 的 音色 作为 主 色调 ， 表 现 出 个 性 的 所 ;为 了 体现 出 迁 全 意 和 北 明正 面 的 意 象 ， 风 和 类 网 页 一 
。 为 了 防止 过 于 沉闷 ， 使 用 了 流线型 的 边缘 ， 而 且 在 页 ; 般 都 会 采用 白色 和 浅 灰色 等 明亮 的 颜色 作为 背景 ， 然 后 ; 
! ” 面 上 方 和 下 方 分 别 放置 了 两 块 较 浅 的 颜色 ， 使 整个 页 面 的 ， ” 零 零 散 散 地 使 用 一 些 鲜艳 的 小 块 面 点 缀 页 面 ， 达 到 吸引 ， 
| 人 浏览 者 的 目的 。 


梦幻 的 浅 莲 灰 p 
浅 莲 灰 是 一 种 柔美 明亮 的 色彩 ， 用 来 表现 童话 的 梦幻 感 和 轻盈 甜蜜 感 再 合适 不 过 。 与 高 明度 的 


粉红 搭配 ， 可 以 表现 出 甜美 的 效果 ; 与 粉 蓝 色 和 丁香 紫 等 略 带 清冷 意味 的 高 明度 色彩 搭配 ， 可 以 展 
现 出 恬淡 的 效果 ， 如 图 12-5 所 示 。 


第 12 章 紫色 系 的 应 用 


bs i | #ec1067 
gE Tr bi 该 网 页 中 大 面积 使 用 浅 芝 友 ， 拱 
ea ， 配 各 种 明艳 的 颜色 ， 给 人 以 多 彩 | 
dy 人 ， 多 姿 的 印象 ， 体 现 了 年 轻 女性 的 ， 
， 青 春 靓 丽 。 | 


图 12-5 
浅 莲 灰色 中 红色 的 成 分 比 蓝 色 的 成 分 多 很 多 ， 所 以 有 非常 明显 的 柔美 感 ， 高 明度 的 属性 又 使 其 
表现 出 了 近乎 童话 般 的 迷 幻 和 稚嫩 。 浅 莲 灰 与 暖色 搭配 可 以 表现 出 柔美 的 效果 ， 与 冷色 搭配 则 可 以 
表现 出 温柔 的 感觉 。 


案例 类 型 ， 网 络 教 
1 群体 定位 ! 学生、i | 
! 浅 莲 灰 明度 极 高 , 很 难 与 粉色 区 分 开 来 , 与 咖啡 色 搭配 给 人 以 优雅 的 感觉 ,， 
1 水 蓝 色 和 铬 黄色 的 加 入 ， 给 人 以 轻松 、 愉 悦 的 印象 


回 ”设计 分 析 

@ 使 用 白色 作为 背景 ， 浅 莲 灰 作为 主 色调 ， 降 低 页 面 的 厚重 感 ， 黄 定 了 温暖 、 和 柔媚 的 基调 。 顶 
部 的 咖啡 色 导 航 条 正好 与 明亮 的 颜色 构成 对 比 ， 强 化 了 页 面 的 层次 感 。 

@) 使 用 明度 略 低 ， 纯 度 一 致 的 粉红 、 水 蓝 色 和 铬 黄色 作为 辅助 色 。 总 体 来 说 ， 各 种 颜色 的 明暗 
对 比 和 冷暖 对 比 都 使 用 得 恰到好处 ， 整 体 配 色 效果 协调 而 丰富 。 
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加 ”绘制 步骤 


制作 信和 栏 。 


_ 丘 和 文字 


第 4 步 : 继续 续 仙 加 
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对 制 国标 , 括 入 直 


第 1 步 : 创建 页 面体 加， 


第 3 步 : 


x 的 配 名 


.六 可 亚 伸 的 配色 方案 _ 


和 
让 
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; 配色 评价 ; ;配色 评价 : 
| 将 页 面 中 的 紫色 换 成 略 带 一 点 点 绿色 的 粉 黄 ， 将 栓 色 换 为 粉 ;粉色 给 人 以 刊 塞外 嫩 的 感觉 , 当 市 场 定位 为 青少年 或 成 人 时 , ; 
; 红色 ， 使 页 面 看 起 来 更 具 亲和力 和 温暖 感 ;显得 有 些 幼稚 ， 且 不 够 严谨 和 正式 。 | 


Nevw Famt Favorktes 


: 用 于 女性 化 六 品类 网 页 ; 

;GD 采用 白色 作为 背景 色 ， 中 间 的 主体 部 分 别 采 用 了 咯 深 一 些 ; GD 女性 化 六 品类 的 页 面 通 常 使 用 这 类 粉红 色 的 色彩 ， 因 为 粉 
| 。 的 浅 莲 灰 作为 背景 ， 制 造 册 温 明科 和 的 感觉 | 。 红色 有 着 很 强 的 女性 色彩 ， 这 寺 页 面 也 不 例外 。 : 
| @ 前 景 使 用 同色 系 的 粉红 和 栓 红 等 色彩 进行 搭配， 更 强化 了 ; @ 页 面 通 体 都 是 粉 粉 业 缴 的 浅 莲 灰色 ， 配 合 白色 烟 加 ， 将 迷 
清 夹 而 天 宕 的 氛围。 | 纪 和 刀 的 感觉 泻 染 到 了 极限 。 : 


| @ 页 面 中 各 种 形状 的 运用 堪 称 精妙 无 处 不 在 的 弧 形 、 楼 桃 、 @) 将 两 个 白色 的 贺 角 和 矩 形 错落 排列 作为 整个 页 面 布局 的 主要 ; 
| 。 导航 、 按 钮 橙子 和 最 下 面 的 迷你 水 果 相 互 呼应 ， 强 化 了 ; 。 框架 部 分 。 
| 。 灵动 和 轻松 的 感觉 1 @ 左上 方 深 色 的 棕 红 正好 压制 了 轻 对 职 的 感觉 ， 可 以 有 效 引 


[3.1 丑 纯洁 的 白色 p]】 


白色 是 一 种 纯洁 而 简单 的 色彩 ， 它 给 人 清洁 、 纯 粹 、 正 义 、 干 净 的 感觉 。 白 色 通常 作为 背景 色 ， 
能 够 营造 出 简洁 、 朴 素 的 气氛 ， 如 图 13-1 所 示 。 


一 
f DB — 
白色 从 某 种 意义 上 说 是 干净 、 毫 ， 
无 杂质 的 代表 ， 网 页 设计 中 经 常 | 
ha 二 需要 必要 的 留 白 ， 因 为 留 白 可 以 | 
给 人 空间 感 ， 让 人 觉得 放松 、 明 ， 
净 和 透彻 。 该 网 页 大 面积 使 用 白 | 
色 ， 给 人 以 洁净 、 明 亮 的 印象 ， ， 
了 使 要 表现 的 主题 和 每 一 个 元 素 都 ， 
天 展现 得 优雅 而 精致 。 
图 13-1 


白色 是 一 种 可 以 与 其 他 任何 颜色 相 搭配 的 色彩 。 在 网 页 设计 中 ， 通 常用 白色 作 
人 


i | 
! 白色 是 一 种 本 身 没有 色相 、 无 纯度 且 明 度 最 高 的 颜色 ， 它 也 是 一 种 非常 好 ， 
NO 1 搭配 的 颜色 。 将 白色 与 其 他 有 彩色 搭配 ， 可 以 很 好 地 突出 其 他 色彩 

1 主要 色相 EE 黑色 、 红 色 


案例 背景 
表现 重点 


第 13 章 无 彩色 系 的 应 用 


#696269 ， #Hf0103 


it 
人 白色 作为 整个 页 面 的 背景 色 ， 使 主体 低调 的 颜色 突出 于 整个 页 面 ， 同 时 使 页 面 看 起 来 明快 而 
不 失 稳重 。 
@ 将 小 面积 刺眼 而 鲜亮 的 红色 呈 三 角形 分 布 于 页 面 中 ， 融合 于 整个 页 面 ， 起 到 了 点 级 页 面 的 
效果 。 


(3 黑色 的 文字 与 白色 的 背景 明度 对 比 反 差 较 大 ， 却 不 与 背景 冲突 ， 反 而 为 页 面 添加 了 稳重 的 
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日” 延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方 


i 配色 评价 ， ;配色 评价 : | 
| 也 可 以 将 页 面 背景 色 设置 为 与 主 色调 相同 的 紫 灰色 ， 页 面 看 ; 使 用 紫色 作为 背景 ， 运 用 过 多 ， 无 形 之 中 给 人 一 种 翡 伤 与 绝 | 
;起 来 空间 感 更 强 ， 为 页 面 添加 一 丝 神秘 感 ; 望 的 感觉 。 如 果 能 提高 亮度 、 减 少 纯度 或 色彩 位 置 ， 也 是 很 | 
| ; 好 的 应 用 。 | 


; 应 用 于 家 居 网 页 : 用 于 卡通 网 页 : | 
; 0 将 大 范围 的 白色 背景 措 配 小 面积 色彩 明晰 的 红色 ， 很 好 地 ; 中) 用 大 面积 的 白色 作为 背景 ， 简 洁 大 方 。 拱 配 整 块 的 棕色 作 ; 
; 。 突出 主题 ， 且 为 页 面 营造 了 明快 的 气氛 ， 减 缓 了 红色 给 人 ; 。 为 主 色 ， 突 出 主题 。 | 
| 。 造成 的 视觉 刺激 添加 少量 的 绿色 作为 点 级 ， 同 样 醒目 却 不 抢 主题 镜头 ， 还 ; 


@ 加 入 适量 的 浅 土 色 ， 丰 富 了 页 面 效果 ， 营 造 出 一 种 暖 意 融 ， ”为 页 面 添加 了 一 丝 绚丽 效果 ， 用 得 恰到好处 。 
融 的 氛围 。 文 字 颜色 与 其 背景 颜色 形成 鲜明 对 比 ， 突 出 ) 深 灰 色 的 文字 同样 突出 于 背景 之 中 ， 使 空虚 的 页 面 变 得 充 
时 呼应 于 整个 页 面 。 实 ， 同 时 整个 页 面 就 获得 了 等 重 的 呼应 。 


精致 的 蓝 灰色 只 


将 灰色 加 入 少许 蓝 绿色 形成 蓝 灰 色 。 蓝 灰色 是 一 种 成 熟 而 理性 的 色彩 , 给 人 一 种 和 平 共处 的 感觉 。 
由 于 蓝 灰 色 中 含有 蓝 绿色 ， 所 以 蓝 灰色 具有 豪华 和 精致 的 个 性 ， 给 人 带 来 品位 高 雅 的 感觉 ， 通 
常 在 色彩 搭配 设计 中 作为 背景 色 使 用 ， 如 图 13-2 所 示 。 


会 带 着 一 些 蓝 色 的 忧郁 ， 
;和 一 些 灰色 的 瞳 沉 ， 通 常 在 被 | 
， 运 用 的 时 候 ， 有 一 种 衬托 主题 ， 
.< 和 这 染 氛 围 的 使 命 。 该 网 页 中 | 
! 使 用 了 白色、 黑色 和 蓝 灰色 ， | 
蓝 灰色 成 为 整个 页 面 的 主体 ， 
| 构成 了 富有 思想 、 内 洱 和 深刻 | 
,语意 的 重要 因素 


图 13-2 
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友 配 色 案 例 40: 酒水 产品 网 页 配色 


蓝 灰色 通常 用 于 设计 作品 的 背景 色彩 ， 用 于 衬托 主题 的 精致 和 高 雅 的 感觉 。 例 并 
如 ， 许 多 的 杂志 封面 背景 就 是 蓝 灰 色 。 但 也 有 些 设计 作品 将 其 作为 主 色 调 ， 效 果 也 ” 回 
到 有 


案例 背景 


配色 要 点 


NUSOTOSOSOSOSOS SS “=== ====--===--=- 


™ 
BEST OF 
FLAVOURS 


EXPERIMENT 
THEUFE 


可 


CT ee (Reem eee ro wom 


回 ”设计 分 析 

人 @ 使 用 浅 淡 的 蓝 灰色 作为 背景 色 ， 为 页 面 添加 了 一 丝 轻巧 与 明快 。 搭 配 绿色 作为 辅助 颜色 ， 突 
出 主题 的 同时 又 很 好 地 衬托 了 主题 的 精致 细腻 。 

@ 红色 以 其 最 耀眼 的 特点 装点 了 页 面 。 在 充斥 着 蓝 灰色 和 绿色 的 冷色 调 页 面 中 , 红色 作为 补 色 ， 
能 够 让 浏览 者 第 一 时 间 注 意 到 。 

@ 黑色 的 文字 起 到 压轴 作用 , 除了 能 够 清楚 地 表达 页 面 内 容 外 , 还 能 衬托 出 页 面 主体 的 精致 感 。 


句 绘制 步骤 


: | ,| 
| 多-- [2) PERORs | 多 - SH 上 Eror 
SOL 


回 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


HE: | 
BEST OF : A BESTOR E 
FLAVOURS | AR 9 FLAVOURS | 


条 仙 


! 配色 评价 : 
(AAS 
! 点 ， 为 页 面 添加 了 一 丝 活跃 的 气氛 。 


主 图 中 已 经 措 配 绿色 和 红色 的 情 况 下 ， 加 入 高度 的 到: . 
得 脏 乱 。 红 色 的 使 用 也 给 人 低廉 的 感觉 


| 应 用 于 冷饮 网 页 : 

人 自 色 冯 果 与 流 色 的 主 色 源 变 撕 配 ,很 好 地 体现 了 蓝 友 色 
含 著 、 精 致 、 雅 致 、 而 人 寻味 的 效果 ， 且 使 整个 页 面 空间 | 
感 很 强 ， 给 人 带 来 一 丝 清凉 、 轻 快 的 感觉 。 

1 指 深 E 色 作为 畏 色 ， 与 归 色 相 呆 应 ， 忆 入 个 页 面 公有 

| 。 效果 协调 而 变化 丰富 ， 给 人 以 华美、 精 到 的 感 党 。 洲 灰色 

;的 文字 为 页 面 添加 了 质朴 、 稳 重 的 气氛 。 
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; 应 用 于 设计 类 网 页 : | 
!@ 使 用 浅 淡 的 蓝 灰色 与 白色 搭配 作为 整个 页 面 的 背景 ， 既 体 ; 
现 了 蓝 灰色 的 精致 、 雅 致 、 耐 人 寻味 的 效果 ， 又 体现 了 白 | 
色 明 快 、 纯 洁 的 特点 ， 巧 妙 地 发 挥 两 种 颜色 的 优点 ， 遮 项 
; 了 这 两 种 颜色 的 不 足 。 | 
1G@) 蓝 灰色 背景 搭配 土 黄色 的 主 色 ， 突 出 主题 的 同时 给 人 一 种 ， 
身 临 天 地 之 间 的 感觉 。 | 
人 页 面 加 入 适量 的 绿色 作为 辅 色 ， 同 时 弥补 了 两 种 无 彩色 带 ， 
给 页 面 的 空虚 、 苍 凉 的 感觉 ， 使 页 面色 彩 更 加 丰富 ， 装 点 | 
页 面 的 同时 突出 绿色 健康 、 和 平 的 主题 。 加 入 纯度 较 高 一 
点 的 灰色 文字 , 同色 系 搭配 突出 而 又 不 与 背景 色 发 生 冲 突 。; 


温暖 的 中 灰色 D ] 


中 灰色 是 一 种 纯度 低 、 明 度 低 的 色彩 ， 给 人 温暖 而 亲 和 的 印象 。 将 中 灰色 运用 在 设计 作品 中 ， 
可 以 缓解 紧张 的 情绪 。 

中 灰色 也 是 一 种 具有 治愈 作用 的 色彩 。 在 网 页 色彩 搭配 中 ， 经 常 把 中 灰色 作为 主 色 ， 用 简朴 的 
背景 突出 主体 的 精致 与 华丽 ， 如 图 13-3 所 示 。 


aristide 
人 


| 这 是 一 家 网 络 创意 开发 设计 机 | 
| 构 的 网 页 。 中 灰 、 深 灰 和 白色 ， 
| 的 明暗 对 比 给 人 以 分 明 的 层次 ， 
; 感 。 页 面 中 的 红色 与 无 彩色 之 | 
| 间 在 明暗 和 透视 感 的 处 理 上 极 | 


， 富 创意 性 ， 显 得 特别 醒目 。 


女 配 色 案 例 41: 汽车 网 页 配色 
中 灰色 是 一 种 介 于 黑色 和 白色 之 间 的 中 性 色 。 将 中 灰色 运用 在 网 页 色彩 搭配 中 ， 


若 不 经 过 合理 的 安排 ,会 使 页 面 效果 显得 灰暗 、 较 脏 ， 有 时 也 容易 给 人 笑 废 、 苍 凉 、 
消极 、 肖 丧 、 沉 闷 的 感受 ， 所 以 灰色 通常 会 用 在 很 多 表现 阴暗 、 自 废 效 果 的 场合 。 
下 面 通过 本 案例 的 制作 与 配色 分 析 ， 学 习 在 网 页 设计 中 如 何 使 用 灰色 。 


回 设计 分 析 

@ 本 案例 采用 中 灰色 作为 主 色调 。 搭 配 黑色 和 深 灰色 使 用 ， 既 能 增加 页 面 的 层次 感 ， 又 能 很 好 
地 表现 汽车 产品 的 神秘 感 和 科技 感 。 

@ 为 了 防止 低 明 度 的 色彩 过 于 沉闷 ， 页 面 中 搭配 使 用 明黄 色 和 蓝 色 的 图 片 ， 增 加 页 面 的 活泼 性 
和 时 尚 感 ， 对 页 面 起 到 了 很 好 的 色彩 平衡 感 。 


加 Km 


回 ”延伸 方案 
可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


! 应 用 于 怀旧 风格 网 页 : 
了 整个 页 面 是 以 无 彩色 系 色调 为 主 , 给 人 以 莫名 怀念 的 感觉 。; 整个 页 面 通 过 不 同 明度 的 灰色 得 到 丰富 的 色 阶 。 
2) 将 白色 作为 背景 色 ， 搭 配 大 量 灰 度 图 片 ， 既 突出 主题 ， 同 ; @ 白色 的 背景 搭配 灰色 的 主 色 ， 突出 页 面 的 同时 变化 较为 组 


; 时 削弱 了 白色 背景 带 来 的 苍白 、 消 极 情绪 。 和 ， 给 人 以 和 谐 而 温暖 的 感觉 。 | 
! @ 页 面 底部 加 入 少许 的 深蓝 色 作为 点 级 色 ， 与 顶部 黑色 线条 ; 3) 加 入 适量 的 黄色 作为 辅 色 ， 减 缓 无 彩色 带 来 的 颓废 、 苍 凉 ! 
! 。 相 呼应 ， 为 页 面 增加 一 些 活泼 气息 。 ! 。 感 的 同时 ， 为 页 面 添 加 了 一 丝 活 泌 、 动 感 的 气息 。 | 


1 绿色 的 主题 文字 在 灰色 的 主题 图 片 中 异常 醒目 ， 使 整个 页 ! @ 灰色 的 文字 分 布 于 白色 的 背景 中 ， 充 实 了 整个 页 面 ， 同 时 
面 效果 更 稳重 、 更 和 谐 。 ， 与 主体 颜色 相 呼应 ， 使 效果 看 起 来 更 加 和 谐 、 温 暖 人 心 。 ; 


腊 胱 的 浅 灰色 5 


与 中 灰色 相 比 ， 浅 灰色 显得 更 加 柔和 而 模糊 ， 是 一 种 腊 胱 而 缓和 的 色彩 。 在 实际 的 色彩 搭配 设 
计 中 ， 浅 灰色 通常 以 调和 色 的 形式 出 现 。 

浅 灰色 是 由 灰色 加 入 大 量 的 白色 调和 而 成 的 ， 是 一 种 比较 明亮 的 、 较 为 接近 白色 的 颜色 ， 所 以 
很 容易 与 其 他 色彩 相 搭配 ， 如 图 13-4 所 示 。 


第 13 章 无 彩色 系 的 应 用 


该 网 页 整体 被 注入 浅 ， 
< 区 色 ， 环 如 时 上 了 一 | 


0 .RS, Li ， 
TREE SEE TAR , 引 人 思 案 。 | 
图 13-4 


高 品质 的 黑色 


黑色 是 一 种 明度 最 低 、 无 纯度 的 无 彩色 。 它 是 一 种 很 正式 的 颜色 ， 有 着 庄严 而 厚重 的 秉性 ， 所 
以 通常 用 在 比较 正式 、 严 肃 的 场合 。 

黑色 给 人 一 种 高 级 与 神秘 的 感觉 。 黑色 与 其 他 有 彩色 相 搭 配 ， 可 以 吸收 其 他 所 有 可 见 光 ， 给 人 
一 种 神秘 、 深 沉 、 内 敛 的 印象 。 将 黑色 作为 背景 色 ， 可 以 突出 主题 ， 如 图 13-5 所 示 。 


， 这 是 一 家 品牌 设计 网 页 , 本 ， 
， 身 极 具 神 秘 感 和 厚重 感 的 黑 ， 
， 色 ， 将 主题 衬托 得 极 富 个 性 | 
| 和 内 涵 ， 金 色 的 点 组 使 整个 ， 
， 页面 体现 出 奢华 的 印象 , 无 
， 处 不 体现 高 端 .贵重 的 感觉 。 ， 


图 13-5 


广 配 色 案 例 42: 电子 设备 网 页 


色 是 最 黑暗 且 纯度 、 色 相 、 明 度 最 低 的 无 彩色 。 因 
挥 其 他 颜色 的 特性 ， 是 最 有 力 的 搭配 色 。 


独 


尺 
EE: 


Ps 、Photoshop CC 网 页 配色 设计 全 程 揭秘 (第 2 版 ) 


请 
主 色 辅 色 


文本 色 


设计 分 析 

GD 页 面 使 用 黑色 作为 背景 ， 可 以 使 浏览 者 不 受 浏览 器 等 内 容 的 影响 ， 将 注意 力 集中 在 页 面 的 主 
题 图 片上 。 

@@ 使 用 白色 主 图 和 白色 文字 ， 与 黑色 背景 形成 鲜明 的 对 比 ， 在 方便 浏览 者 浏览 的 同时 ， 突 出 页 
面 主 题 。 


@) 使 用 明度 较 高 的 品 红色 作为 点 缀 色 ， 在 黑色 的 背景 中 显得 明确 且 活泼 。 
绘制 步骤 
第 1 步 : 填充 页 面 背 景 ， 制 作 右 上 角 的 卷 角 效果 。 第 2 步 : 插入 Logo、 形 状 和 文字 ， 制 作 导航 栏 。 


第 3 步 : 插入 主题 图 片 和 形状 。 第 4 步 : 插入 文字 和 其 他 图 片 、 形 状 等 元 素 。 


#0076a9 #e6002d #891679 #08200 


老练 
#36b49 #000000 


#000000 #e7428c #af0081 #e6c99a 
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延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


配色 评价 配色 评价 
将 页 面 的 背景 色 从 黑色 修改 为 墨绿 色 , 整个 页 面 更 利于 浏览 。 ; 当 绿色 挫 杂 了 黑色 时 ， 不 但 会 使 黑色 丧失 神秘 感 ， 还 会 给 浏 
将 页 面 中 的 图 标 和 文字 修改 为 明亮 的 草绿 色 ， 与 背景 色 形成 , 览 者 一 种 成 熟 和 沧桑 的 感觉 ， 虽 然 黄色 和 品 红色 可 以 给 人 醒 


同色 系 拱 配 ， 色 调 统一 ， 主 题 明确 。 目 和 跳跃 感 ， 但 页 面 效果 仍 显得 缺少 生气 ， 不 庄重 。 
相同 色 系 应 用 于 其 他 网 页 


4 
BUZZARD 


ov 
应 用 于 时 装 网 页 应 用 于 企业 网 页 


中 黑色 是 永 不 过 时 的 色彩 , 用 在 时 尚 类 网 页 设计 中 恰到好处 。, CD) 将 白色 作为 主 色 , 搭配 黑色 的 背景 , 在 明度 上 反差 非常 大 ， 
@ 这 里 将 黑色 作为 辅 色 ， 搭 配 明度 较 低 的 褐色 ， 突 出 主体 地 因此 整个 页 面 视 觉 冲 击 强烈 , 主 次 分 明 , 给 人 一 种 很 庄严 、 


位 ， 给 人 一 种 神秘 、 深 沉 、 高 级 的 印象 。 搭 配 白色 背景 ， 高 贵 的 感觉 。 
给 人 很 强 的 视觉 冲击 力 ， 突 出 时 尚 个 性 的 感觉 。 如 红色 是 视觉 刺激 强烈 的 颜色 ， 将 其 置 于 白色 中 ， 看 起 来 更 


加 灰色 的 文字 在 页 面 中 起 到 调和 作用 , 减缓 了 黑色 给 人 悲哀 、 透亮 ， 并 且 起 到 了 缓和 视觉 疲劳 的 作用 。 
压抑 的 感受 ， 也 消除 了 白色 给 人 的 轻浮 、 空 旷 感 。 整 个 页 ; (3) 灰色 的 文字 使 黑白 和 红色 的 搭配 不 拘束 、 不 呆板 ， 增 强 页 
高 贵 、 轻 松 ， 流 露出 稳重 与 个 性 时 尚 的 气氛 。 面 视觉 的 轻松 和 愉悦 和 
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色彩 的 面积 、 明 度 、 对 比 # 征 ， 会 构成 一 个 网 页 页 面 的 基本 色调 ， 不 同 的 色调 会 表现 出 不 
同 的 主题 风格 ， 给 人 以 不 同 的 心 和 视觉 体验 。 


14.1 网 页 配色 的 色调 特点 只 
在 对 网 页 进行 优化 或 改变 整体 色调 时 ， 最 主要 的 是 先 确定 网 页 基本 色调 的 面积 分 布 情况 。 在 网 
页 中 经 常 使 用 多 色 组 合 ， 如 果 大 面积 、 多 数量 地 使 用 鲜艳 的 色彩 ， 网 页 的 色调 势必 会 非常 鲜艳 ， 如 
妈 14-1 所 示 。 
大 面积 、 多 数量 地 使 用 灰色 ， 势 必 会 使 页 面 笼罩 一 层 灰 调 ， 其 人 
页 整体 变化 中 产生 明显 的 统一 感 。 
如 果 设 置 小 面积 、 对 比 强烈 的 点 缀 色 、 强 调 色 或 醒目 色 ， 由 于 其 不 同色 感 和 色 质 的 作用 ， 会 促 
使 整个 网 页 页 面 丰 富 、 活 跃 起 来 ， 如 图 14-2 所 示 。 


攻 


色调 以 此 类 推 ， 这 种 方法 能 在 


Pr 


， 该 网 页 中 大 面积 、 多 数量 地 使 用 高 纯度 的 ， ;该 网 页 中 大 面积 使 用 纯度 和 明度 较 低 的 黄 ， 

， 颜色 ， 明 暗 对 比 也 很 强烈 ， 使 页 面 显 得 异 ， ， 色 、 咖 啡 色 和 黑色 ， 营 造 了 一 种 深沉 和 岁 | 

， 常 鲜艳 ， 内 容 丰富 、 炫 目 ， 动 静 相 辅 、 层 ， ， 月 感 ， 而 中 间 纯 度 较 高 的 绿色 和 橘 黄色 ， ， 

， 次 界限 分 明 , 在 视觉 上 具有 极 强 的 刺激 感 。 ， ， 成 功 吸 引 了 浏览 者 的 注意 ， 为 整个 页 面 增 ， 

| ， 添 了 活跃 感 和 新 潮 感 。 | 
图 14-1 图 14-2 


如 果 色 彩 对 比 过 于 强势 、 醒 目 色 过 于 明显 、 点 级 色 面 积 过 大 ， 就 会 破坏 页 面 的 整体 统一 感 ， 失 
去 色彩 的 平衡 ， 会 显得 杂乱 无 章 。 反 之 ， 如 果 这 些 色 彩 的 面积 太 小 ， 会 被 四 周 包围 的 色彩 同化 、 融 
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合 而 失去 预期 的 作用 。 所 以 在 网 页 的 配色 选择 上 应 充分 掌握 各 种 色调 的 特点 ， 这 样 才能 完成 对 网 页 
主题 比较 鲜明 的 表达 。 


个 性 鲜明 的 色调 D 


高 纯度 色彩 对 比 鲜明 


由 高 纯度 的 不 同色 相 组 成 的 色彩 对 比 度 强 ， 所 以 在 表达 事物 个 性 方面 比较 鲜明 ， 高 纯度 的 色彩 
搭配 应 用 在 网 页 配色 时 ， 需 要 注意 色彩 之 间 的 间隔 、 缓 冲 和 调节 作用 ， 使 其 可 以 达到 有 变化 也 有 统 
一 的 效果 ， 如 图 14-3 所 示 。 


， 该 网 页 中 使 用 了 红 、 蓝 、 黄 、 橙 | 
， 等 多 种 高 纯度 的 色彩 ， 或 使 用 间 ， 
， 色 作为 过 渡 ， 偶 尔 使 用 明度 低 的 ， 
所 颜色 作为 衔接 ， 降 低 了 多 色 组 合 ， 
| 给 人 的 凌乱 感 ， 从 而 使 气氛 变 得 | 
! 异常 活跃 ， 给 人 以 内 容 丰富 且 个 | 
， 性 鲜明 的 感觉 。 | 


高 纯度 冷色 体现 科技 感 


蓝 色 系 在 冷暖 印象 中 属于 冷色 , 它 所 要 传达 的 是 一 种 理性 和 冷静 。 在 网 页 配色 中 用 高 纯度 的 蓝 色 ， 
可 以 传达 出 一 种 科技 时 代 感 ， 给 人 以 理性 、 冷 静 的 感受 ， 如 图 14-4 所 示 。 


| 该 网 页 中 使 用 了 大 面积 的 蓝 色 色 | 
， 调 ， 高 纯度 的 颜色 体现 了 一 种 科 ， 
， 技 感 和 现代 感 。 使 用 黑 和 白 作为 | 
过渡， 使 页 面 看 起 来 绚丽 和 协调 。 | 


好 的 宣传 效果 ， 如 图 14-5 所 示 。 


| 
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;该 网 页 中 大 面积 地 使 用 了 ， 
| 高 纯度 的 红色 和 黄色 , 给 | 
| 人 以 一 种 刺激 和 兴奋 感 ， | 
| 配合 一 些 白 色 和 绿色 作为 ， 
! 点 缀 和 过 渡 ， 丰 富 了 整个 ， 
， 页面， 给 人 以 鲜艳 和 自然 ， 
| 的 感觉。 


清静 高 雅 的 色调 5 


为 高 纯度 的 色彩 提高 明度 ， 即 加 入 一 些 白色 ， 会 降低 强烈 的 纯度 对 比 所 带 来 的 刺激 感 。 应 用 在 
网 页 配色 时 ， 会 使 页 面 给 人 以 清新 、 明 朗 的 视觉 印象 ， 像 少男 少女 的 纯真 ， 给 人 以 朝气 蓬勃 、 积 极 
向 上 的 精神 感受 。 


中 等 明度 体现 清 训 > 


加 入 白色 实际 上 就 是 降低 色彩 的 纯度 ， 当 色彩 的 艳丽 程度 减少 时 ， 对 比 可 以 呈现 出 清新 、 自 然 
的 感觉 ， 如 图 14-6 所 示 。 


Moda 
Mas modernaee 


， 该 网 页 中 运用 了 许多 浅 灰 
， 色 ， 减 少 了 页 面色 彩 所 因 | 
， 有 的 浮华 ， 展 现 其 高 雅 、 | 
， 脱 俗 的 一 面 。 


图 14-6 


深蓝 色 的 色调 给 人 以 冷峻 的 感受 , 如 果 提 高 其 明度 , 加 入 少许 白色 , 让 它 接近 大 海 或 天 空 的 颜色 ， 
就 会 变 得 更 加 自然 、 宽 广 和 明快 ， 如 图 14-7 所 示 。 

高 纯度 的 暖色 会 带 给 人 挑战 、 华 丽 的 感受 ， 提 高 其 明度 会 有 一 种 温馨 、 愉 悦 的 感觉 ， 如 果 配 上 
一 些 冷色 ,会 令 人 感到 充满 趣味 和 活力 ， 如 图 14-8 所 示 。 
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Yas Tn 


OUR DOMESTIC FLIGHT 


闹 唱 靖 轨 入 
加 


色 和 绿色 ， 体 现 出 清新 、 了 明朗 且 有 活力 。 


高 明度 体现 轻柔 明净 


色 中 加 入 灰色 ， 可 以 减弱 冷色 的 严肃 和 冷峻 ， ， 暖色 中 加 入 灰色 ， 给 人 甜美 、 清 纯 的 感受 ， 

象 ， 保 留 客观 、 理 想 的 感觉 ， 并 增添 一 种 深 ， | 
| | 浏览 者 清纯 可 人 的 印象 ， 同 时 又 丰富 了 页 面 

， 果 。 灰 色 的 加 入 ， 增 加 了 许多 柔和 的 感觉 ， 


面 中 的 蓝 色 给 和 以 悠远 、 宁 静 的 感觉 ， 配 以 ， 
| ， 主 图 显得 丰富 又 不 会 过 分 张扬 。 


一 器 MOST VIEWED ITEMS TODAY 


该 
页 面 以 粉色 为 主 ， 加 入 绿色 、 林 色 和 蓝 色 ， 给 
效 
使 


在 青色 中 加 入 大 量 白色 ， 提 高 整体 色调 的 明度 ， 色 感 相 对 减弱 ， 犹 如 春天 的 新 绿 ， 透 明 、 清 澈 、 


明净 和 轻快 。 


相反 而 言 ， 当 页 面 中 加 入 冷色 时 ， et 减弱， 以 达到 一 种 透明 的 青色 
效果 ， 给 人 以 清凉 、 夹 快 的 感觉 ， 如 果 适 当地 点 缀 一 些 绿色 ， 则 会 显得 更 加 清新 、 自 然 ， 如 图 14-9 


所 示 。 


| 该 网 页 中 加 入 和 白色， 与 青色 相间 ， | 
! 适当 提高 色彩 的 明度 ， 给 人 以 肃 | 
， 静 、 理 性 的 感觉 ， 少 量 的 黄色 和 粉 ， 
| 色 ， 添 加 了 活力 和 优雅 ， 极 具 精 致 ， 
| 感 和 美妙 感 ， 整 个 页 面 冷暖 相间 ， 
， 既 给 人 以 平静 悠闲 的 感觉 又 显得 
， 舒适 而 温暖 ， 令 人 愉悦 。 
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融入 灰色 体现 高 雅 
灰色 调 是 在 全 部 的 色相 系 中 大 量 加 入 了 浅 灰色 ， 使 色相 带 有 一 种 灰 浊 味 ， 色 相 明度 提高 ， 明 
加 给 人 以 下 高 雅 、 恬 静 的 感觉 。 


暖色 中 的 黄色 给 人 以 温暖 、 舒 适 的 感觉 ， 调 入 不 等 数量 的 浅 灰 色 后 ， 会 造成 一 种 太阳 余晖 的 颜 
色 印 象 ， 增 添 一 份 宁静 和 休闲 的 感受 ， 如 图 14-10 所 示 。 


edks 


;该 网 页 中 使 用 中 等 纯度 的 权 色 中 

， 融入 灰色 ， 又 加 以 大 面积 的 浅 灰 和 
4 自 色 ， 布 局 合理 、 界 限 分 明 ， 使 整 | 
| 个 页 面 显得 温暖 、 尾 意 ， 又 十 分 高 
， 端 ”典雅 . 


六 配色 案例 43: 品牌 快餐 网 页 配色 


深 红色 一 般 可 以 衬托 出 热烈 的 感觉 ， 这 类 颜色 的 组 合 比 较 容 易 使 人 提升 兴奋 度 。 
明度 降低 后 显得 更 加 优雅 而 含蓄 ， 被 广泛 应 用 于 时 尚 休 闲 等 类 型 的 网 页 。 


“网 页 中 使 用 了 不 同 明度 的 红色 ， 增 加 页 面 层次 的 同时 ， 也 让 浏览 者 ; 
$ 感受 到 热情 。 导 航 条 使 用 浅 红色 ， 与 背景 形成 鲜明 的 对 比 ， 使 导航 
; 更 易 浏览 
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色调 的 网 页 配色 


和 1 不同 


加 ”设计 分 析 

@ 整个 网 页 使 用 红色 作为 主 色 ， 能 够 很 好 地 表达 食品 的 主题 。 多 层次 地 使 用 主 色 ， 整 个 页 面 层 
次 丰富 ， 能 够 清楚 地 衬托 出 页 面 中 的 文字 和 图 片 。 

@ 降低 主 色 的 纯度 ， 得 到 浅 红色 ， 用 作 导 航 的 背景 ， 与 主 色 搭配 ， 营 造 出 了 鲜 活 、 志 


鲜明 。 


页面 中 使 用 局 部 鲜艳 的 橙色 ， 使 页 面 更 活 泌 ， 对 比 更 力 
页 的 整体 更 加 融合 、 协 调 。 橙色 的 文字 在 呼应 辅 色 的 同时 ， 使 页 


给 人 活力 无 限 的 感觉 
(3) 图 片 的 颜色 也 与 
对 比 更 加 鲜明 。 


一 


回 ”延伸 方案 
V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


:® 淡 粉色 和 浅 粉色 给 人 一 种 绿 缆 、 轻 悠 的 感觉 ， 与 浅黄 色 拱 
| 使 人 心情 由 ， 客 易 引 发 人 配 ， 给 人 以 鲜亮 的 感受 。 
如 橙色 与 黄色 搭配 ， 表 现 出 活 泌 、 丰 收 的 效果 ， 色 感 温 和 舒 ; @ 度 过 高 ， 给 人 一 种 淡泊 的 感觉 ， 与 主 图 的 质感 不 


适 ， 带 来 甜美 、 可 口 的 享受 。 


! 应 用 于 企业 类 型 网 页 : ! 应 用 于 装修 装潢 网 页 
!Q@ 整个 页 面 以 深 红色 为 主 色 ， 体 现 出 页 面 的 大 气 与 沉稳 。 了 这 是 一 款 装修 装潢 网 页 ， 深 红色 占据 了 大 部 分 的 面积 ， 极 ， 
义 同色 系 的 暖色 图 片 ， 能 够 体现 出 企业 的 悠久 历史 ， 向 ，” 易 吸引 浏览 者 的 视线 ， 散 发 着 温馨、 浪漫 的 气息 。 

) 以 黑色 为 辅 色 ， 很 好 地 压制 了 刺激 的 红色 ， 使 整个 页 面 更 ， 


朴实 深厚 的 中 庸 色调 


色相 环 中 所 有 颜色 均 加 入 中 等 程度 的 灰色 ， 会 使 纯度 降低 ， 色 相 感 淡薄 ， 应 用 于 网 页 中 ， 会 带 
有 几 分 深沉 与 暗淡 ， 有 着 朴实 、 含 董 、 稳重 的 特点 。 


医药 本 和 融入 中 等 灰色 体现 朴实 加 


中 等 灰 度 的 冷色 可 以 体现 出 大 方 、 沉 稳 的 印象 ， 冷 色 中 灰色 调 的 加 强 可 以 使 页 面 多 一 份 深沉 与 
平稳 ， 不 会 导致 色相 过 于 鲜艳 而 失去 一 种 大 方 的 印象 ， 色 相 淡泊 则 可 以 体现 古朴 、 典 雅 的 感觉 ， 如 


图 14-11 和 图 14-12 所 示 。 


| 紫色 给 人 一 种 贵 气 、 奢 华 的 印象 ， 通 过 加 强 灰 ， 
| 色调 的 融入 ， 可 以 削弱 这 种 气质 ， 从 而 突显 一 ， 
| 种 古朴 、 典 雅 的 气质 ， 给 人 一 种 高 贵 、 大 方 的 | 


， 绿色 给 人 以 生机 、 活 力 的 印象 ， 通 过 融入 少许 | 
， 灰色， 减弱 色相 感 ， 会 让 人 有 一 种 朴实 、 静 谍 | 


， 印 象 。 该 页 面 中 的 紫色 显示 了 女性 的 一 种 高 贵 、 ， Ce 
， 大方 和 典雅 ， 通 过 纯度 和 明度 的 过 渡 ， 使 页 面 ， | 的 让 失 、 “5 
,不 会 过 于 张扬 、 收 缩 有 致 。 | | 

图 14-11 图 14-12 


灰暗 体现 


色相 环 中 所 有 的 颜色 均 加 入 暗 灰 色 , 使 色相 呈现 灰暗 的 色调 , 就 像 乌 云 密 布 的 天 空 ， 阴郁 暗淡 、 
令 人 压抑 。 冷 色色 相 的 明度 偏 低 ， 其 自身 会 呈现 一 种 冷清 、 不 易 靠 近 的 印象 ， 加 入 上 暗 灰 色 后 ， 其 效 
果 会 更 加 明显 ， 如 图 14-13 和 图 14-14 所 示 。 


"FYOUVE GOTTHE ATTITUDE WEVE GOT THE SOUWTION” 


0 OO 
在 为 页 面 配色 时 ， 选 择 一 些 明度 较 高 的 颜色 值 ， | 瞳 灰色 调 还 可 以 衬托 神秘 感 ， 瞳 灰色 调 的 阴郁 
后 ， 加 入 一 些 暗 灰色 可 以 达到 页 面 的 整个 明暗 ， ， 淡 可 以 塑造 页 面 的 一 种 神秘 和 冷峻 ， 除 了 通过 


混合 的 效果 ， 会 增加 一 种 动感 、 酷 炫 的 风格 印 | | 
象 . 该 网 页 在 灰暗 调 中 加 入 白色 ， 提 高 了 明度 ，， | 
降低 了 压抑 气息 ,在 冷清 的 同时 体现 了 编 丽 感 。 ， ， 偏 高 ， 橘 色 浓重 、 浑 厚 ， 使 整个 页 面 敌 生 在 神 
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色相 环 中 的 颜色 加 入 一 些 或 黑 或 白 的 颜色 ， 降 低 了 纯度 ， 看 上 去 或 多 或 少 有 浑浊 感 ， 即 为 浊 色 。 
浊 色 居于 色彩 体系 的 明暗 中 轴线 与 高 纯色 之 间 的 位 置 ， 具 有 明显 的 色彩 个 性 ， 有 益 于 调和 色调 ， 这 
种 配色 也 被 称 为 浊 色 调 ， 如 图 14-15 所 示 。 


| 纯色 加 入 白色 明度 越 来 越 高 , 加 | 
| 入 黑色 明度 越 来 越 障 ， 这 个 是 属于 | 
， 垂直 色 ， 只 是 单独 加 入 白 或 黑 来 调 ， 
|< 整 纯色 的 明暗 ， 可 以 看 成 从 红色 那 ， 
| 个 颜色 的 端点 向 左下 角 散 发 出 来 ， 

;也 可 以 将 其 理解 为 不 饱和 的 颜色 | 
和 纯度 不 高 的 颜色 。 | 


图 14-15 
浊 色 可 以 塑造 静 谥 、 安 详 的 视觉 感受 ， 当 沁 色 呈现 一 种 鲜 、 灰 中 间 的 色调 ， 明 度 和 纯度 都 属于 
中 间 状 态 ， 整 体 色 感 在 视觉 上 给 人 以 温馨 、 亲 和 感 ， 塑 造 一 种 静 谥 、 安 详 的 印象 ， 如 图 14-16 所 示 。 


EF rp ~ 


| 该 网 页 中 色彩 对 比 不 是 很 强烈 ， 背 | 


| lg ， 景 色彩 处 于 一 个 中 间 状 态 ， 不 太 鲜 ， 
一 一 ， 也 不 太 灰 ， 色 彩 对 比 温和 ， 页 面 随 ， 
卫 一 -4 和、 朴实 。 深 灰色 以 及 浅 灰 色 的 措 | 

好 ! 配 使 整个 页 面 看 起 来 简洁 、 朴 实 ， | 

Moto Parts owerarts Fitness | 另外 暖色 黄色 的 加 入 也 使 整个 页 ， 


， 面 呈现 宁静 、 安 详 、 舒 适 的 感觉 。 ， 
图 116 
添加 浊 色 可 以 削弱 色彩 对 比 强度 , 由 于 浊 色 调 的 适应 性 较 强 ， 可 以 应 用 于 网 页 的 大 部 分 配色 中 ， 
还 可 以 削弱 其 他 颜色 的 色彩 浓艳 程度 ， 完 成 良好 的 过 渡 ， 所 以 在 网 页 中 经 常 作 为 背景 去 衬托 主体 ， 
如 图 14-17 所 示 。 


| 该 网 页 色彩 看 起 来 不 那么 突 元 , 整 | 
| 体 趋 于 协调 、 稳 定 。 页 面 中 的 蓝 | 
| 色 在 了 明度、 纯度 上 的 衔接 和 过 渡 ， | 
， 很 好 地 迎合 了 周围 天 蓝 、 海 蓝 及 深 ， 
， 蓝 的 色彩 印象 , 给 人 以 闲适 、 静 谥 、， 
;端庄 和 磅 辜 的 状态 。 | 


图 14-17 
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14.5 辕 ”稳重 深沉 的 色调 p 


中 等 纯度 的 颜色 加 入 少量 黑色 ， 会 使 整个 页 面 看 上 去 笼 暂 了 一 层 较 深 的 调子 ， 显 得 稳重 老成 、 
严谨 尊贵 。 而 当 加 入 大 量 的 黑色 形成 浓 浓 的 深 色调 ， 隐 约略 显 各 色 的 色相 ， 会 表现 出 深沉 、 坚 实 、 
冷静 、 庄 重 的 气质 。 


低 明 度 加 入 灰 和 白 体现 怀旧 


选用 一 些 低 明度 的 色相 以 后 ， 调 入 不 等 数量 的 黑色 或 白色 可 以 加 深 深 色 的 倾向 ， 营 造 出 一 种 老 
a 如 图 14-18 所 示 。 


} 纯度 较 高 的 灰色 作为 页 面 背景 体 | 
， 现 了 深沉 与 稳健 ， 陪 黄色 与 深 红色 | 
， 的 运用 又 表现 了 页 面 的 怀旧 与 老 | 
， 练 风格 。 灰 色 和 了 暗 黄色 在 明度 与 纯 | 
， 度 上 的 融合 与 衔接 ， 无 意 中 营造 了 | 
| 一 种 岁月 感 。 | 


图 14-18 


大 面积 灰暗 色调 营造 紧张 氛围 


大 面积 的 黑色 形成 暗 调 ， 给 人 以 压迫 和 紧张 感 ， 男 性 化 色彩 会 表现 得 更 强势 一 些 ， 整 体 页 面 会 
变 得 强硬 、 坚 实 、 沉 重 ， 在 网 页 配色 中 可 以 传达 一 种 力量 、 强 势 的 印象 ， 如 图 14-19 所 示 。 


' 页 面 背景 的 深 色 给 人 一 ， 
' 种 压迫 与 紧张 感 ， 让 人 ! 
， 有 一 种 喘 不 过 气 的 感受 ， 

， 整体 颜色 的 明度 低 、 纯 ! 
' 度 高 ， 让 人 有 一 种 强硬 ， 
， 的 印象 。 | 


图 14-19 


低 明度 冷色 暗 调 体现 古雅 


蓝 紫色 给 人 一 种 尊贵 、 高 尚 的 印象 ， 在 色相 中 加 入 黑色 后 ， 会 显得 整个 页 面 充实 、 古 雅 ， 这 种 
深 色 倾向 与 一 些 明度 较 高 的 暖色 搭配 ， 会 使 页 面 活泼、 灵动 ， 如 图 14_20 所 示 。 


二 


PCE 


该 网 页 使 用 大 量 的 黑色 给 人 以 深 ， 
沉 的 印象 ， 加 入 蓝 紫 色 增加 了 尊 | 
贵 、 雅 致 的 情怀 ， 整 个 页 面 显 得 沉 ， 
静 、 典 雅 ， 一 些 明暗 和 纯度 不 同 的 ， 
暖色 的 融入 体现 了 尊贵 感 ， 同 时 为 ， 
瞳 沉 的 页 面 添 加 了 一 些 律动 气息 。 | 


起 
| 


孔雀 绿 与 同类 色 的 搭配 ， 能 够 体现 出 清幽 的 效果 ， 展 现 出 了 一 种 生机 ， 有 一 种 
可 归 大 自然 的 心态 ， 非 常 适用 于 与 健康 有 关 的 行业 。 


! 主要 色相 ， 孔 省 绿 、 深 绿 、 浅 灰 


二 一 新 希望 一 
新 活力 添 动力 


回 ”设计 分 析 

中 页 面 中 以 大 面积 的 孔雀 绿 与 深 绿色 搭配 ， 整 体 为 同色 系 配色 ,充满 了 活力 与 朝气 。 
@ 一 些 红色 的 点 级 ， 与 主 色 形 成 了 强烈 的 对 比 ， 呈 现 出 天 然 、 健 康 和 生命 的 气息 。 
@) 乳白 色 为 背景 色 ， 给 人 一 种 干净 、 整 洁 的 印象 ， 符 合 乳 饮品 网 页 的 主题 。 


@ ”绘制 步骤 
: E 片 ， 插 入 形状 和 文字 ， 制 作 项 部 和 左 侧 ; 


第 1 步 : 创建 页 面 主要 版 块 结构 ， 确 认 主 


新 活力 添 动力 新 活力 添 动力 


1 :sara: saar 1Q san: sarwra 
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加 ”延伸 方案 


V 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


TO :nmea ravi 1O :so: zasszs 1Q :anxa: saar 1O sar: :ar 
So ee 和 -1 


| 配色 评价 ; 1 配色 评价 


世 蓝 色 的 孔雀 绿 换 为 黄 绿色 ， 进 一 步 与 绿色 靠近 。 页 面 | 紫色 和 绿色 都 属于 深 基调 色彩 ， 搭配 起 来 有 不 干净 的 感觉 。 


; 呈现 一 种 充满 生机 和 活力 的 效果 ， 能 够 表现 出 温暖、 亲 和 的 ; 建议 不 要 采用 此 种 搭配 ， 如 确 需 搭配 ， 可 以 在 二 者 


应 用 于 家 具 类 网 页 : 
@ 孔 八 绿 的 高 贵 与 权 色 的 时 尚 搭 配 ， 同 时 形成 了 对 比 ， 让 人 ! GD 多 种 明度 和 纯度 较 高 的 多 元 色彩 相 搭配 ， 对 比 强烈 ， 表 现 
感觉 时 尚 、 富 有 活力 ， 给 人 一 种 愉悦 的 心情 。 出 一 种 欢乐 的 氛围 ， 页 面 整体 配色 和 谐 。 


P 间 加 粉 


对 于 色彩 印象 的 感受 ， 虽 然 存在 个 体 差异 ， 但 是 大 部 分 情况 下 ,我们 都 具有 共同 的 审美 习惯 , 这 | 


站 
管 是 哪 种 色彩 印象 ， 都 是 通过 色调 、 色 相 、 色 调 型 、 色 相 型 、 色 彩 数量 、 对 比 强度 等 诸多 因素 
信 合 而 成 的 ， 将 这 些 因素 按照 一 定 的 规律 组 织 起 来 ， 就 能 准确 营造 出 想 要 的 配色 印象 


15.1 上 大 女性 化 的 网 页 配色 印象 


女性 化 的 配色 是 一 种 让 人 感受 到 年 轻 女性 之 美的 亮色 配色 模式 。 女 性 化 的 网 页 配色 一 般 使 
用 暖色 系 来 增加 女性 色彩 ， 若 再 配 上 明度 差 较 小 的 柔和 颜色 ， 则 能 更 好 地 表现 出 女性 的 特点 ， 
明度 较 高 的 紫色 能 体现 出 女性 优美 的 特点 ， 如 图 15-1 至 图 15-3 所 示 。 
， 该 网 页 为 女性 主题 ， 虽 然 少 有 暖 ， 
| 色 的 加 入 ， 但 是 大 面积 使 用 灰色 ， 
4 ， 体现 了 现代 女性 卓 尔 不 凡 的 优越 ， 
”品质 ,高 纯度 、 高 明度 的 绿 、 蓝 、 
黄 等 颜色 体现 了 春天 的 气质 ， 整 ， 
， 个 页 面 给 人 和 柔和、 明媚 的 印象 ， 
仿 。 ， 有 着 春天 百花 齐 放 的 气息 ， 婉 约 | 
VL ， 中 彰显 艳丽 ， 给 人 健康 、 青 春 、 
Pe | 年 轻 态 的 感受 ， 能 引起 女性 群体 | 
aii ， 对 活力 青春 的 追求 和 向 往 。 


| 该 网 页 中 使 用 高 纯度 、 低 明度 的 酒 红色 来 体现 女性 ， ， 与 同色 系 、 邻 近 色 搭配 时 ， 页 面色 调 统一 ， 不 要 外 | 
的 妩媚 和 成 熟 感 。 使 用 棕色 和 黑色 作为 辅 色 ， 对 页 ， ， 来 因素 的 干扰 ， 能 够 增添 庄严 的 气氛 。 红 紫色 与 同 | 
， 盏 起 到 了 很 好 的 调和 作用 。 整 个 页 面 内 容 丰 富 、 动 ， ， 色 系 中 明度 较 高 、 纯 度 较 低 的 紫色 相 措 配 ， 体 现 出 | 
| 感 十 足 。 ， ， 甜美 的 页 面 感 


FE 
太 配 色 案例 45; 化 妆 品 网 页 瑟 色 “本 ) 


搭配 紫色 的 同色 系 颜色 能 够 泻 染 出 甜美 和 淡然 的 气氛 ， 适 合 于 女性 产品 的 
配色 ， 与 对 比 色 搭 配 时 ， 本 种 神秘 感 。 


案例 背景 ] 
1 优雅 的 红 紫色 调 带动 整个 页 面 ， 与 温柔 的 粉红 色 和 洁白 的 | 
; 色 系 搭配 ， 表 现 出 其 独 有 的 时 尚 品位 


ee ee ee ee 


紫红 色 、 粉 红色 、 白 色 


#69053b 1 由 
四 


回 设计 分 析 

人 紫红 色 与 暖色 系 相 搭配 ， 使 页 面 散 发 出 甜美 的 气息 。 和 柔和 的 色彩 能 够 突出 活泼 的 主题 ， 
紫红 色 能 够 给 人 时 尚 浪漫 的 感觉 ， 符 合 该 网 页 的 特点 。 

@ 网 页 的 文字 颜色 采用 了 灰色 ， 在 多 彩 的 页 面 中 显得 低调 目 干净， 利于 阅读 。 


Et 


;第 3 步 ， 继续 插入 其 他 素材 和 文字 。 4 步 : 完善 页 面 内 容 ， 并 制作 版 底 内 容 。 


时 ii 


ES 


A 人 


re ant 


en 二 


Er 


!@ 浅 浅 的 紫色 ， 不 仅 能 够 体现 出 女性 的 柔美 ， 更 多 了 一 
! 。 份 清爽 和 神秘 的 感觉 。 


; 。 会 给 人 以 卓越 非凡 的 魅力 感 。 古板 。 
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外” 相同 色 系 应 用 于 其 他 网 页 


;应 用 于 女性 美容 类 网 页 ; 应 用 于 婚姻 情感 网 页 : | 
| 大 面积 使 用 红 紫 色 作为 主题 内 容 ， 让 人 一 目 了 然 ， 使 整个 | 高 明度 的 红 紫色 散发 着 浓 浓 的 柔美 和 甜 塞 的 气息 ， 配 合 其 | 
| 页 面 温暖 舒适 ， 富 有 亲切 感 ， 导航 部 分 搭配 了 同色 系 ， 泻 ; 他 甜美 和 明艳 的 色彩 更 能 将 青春 和 活力 诠释 到 极致， 非常 
! 染 一 种 优美 、 和 谐 的 氛围 ; 适合 婚姻 情感 类 网 页 。 | 


冷色 系 的 颜色 一 般 流露 出 ri 
男性 色彩 。 使 用 明度 差 大 、 对 比 2 多 以 
强烈 的 配色 ， 或 者 使 用 灰色 及 有 Sn ， 蓝 色 系 为 主 ， 配 以 神 | 
金属 质感 的 颜色 ， 能 很 好 地 措 给 
出 男性 色彩 ， 体 现 出 男性 理智 的 


特点 ， 如 图 15-4 所 示 。 | 体 丰 富 ， 色 调 幽暗 


男性 化 网 页 使 用 冷色 系 淡 | 
弱 色 调 能 体现 出 稳重 ， 而 使 用 明 人 
度 较 高 的 浅 色 可 以 体现 出 清爽 ， 站 ; 
如 图 15-5 和 图 15-6 所 示 。 


乞 g | 
S 

LEGS IN CALLING 

FOR HELP! 

THIGH RESCUE - 


二 三 = 


该 网 页 中 大 量 运用 了 蓝 黑 色 ， 明 度 差 较 小 ， 这 种 色 ， ， 该 网 页 中 浅 灰色 和 深蓝 色相 搭配 ， 首 先 确定 了 理智 


| 调 给 人 刚强 坚实 、 沉 着 稳重 、 十 足 男性 化 的 感觉 ， ， ， 的 印象 ， 明 度 和 纯度 的 变化 给 人 智慧 和 格调 感 ， 点 


| 搭配 偏 暖 的 浅 茶色 ， 明 度 上 的 一 致 如 同 绅士 般 的 风 ; ， 组 褐色 起 到 了 每 缓 的 作用 , 也 给 人 镇 定 自 若 的 印象 


， 度 给 人 以 温和 千 适 感 ， 自 色 的 文字 突出 了 主题 且 添 ， ， 明 艳 、 动 感 的 黄色 中 加 入 灰色 ， 在 使 黑色 成 为 焦点 
， 加 了 阳刚 的 印象 ， ， 的 同时 也 起 到 了 调和 的 作用 。 


eners 


稳定 安静 的 网 页 配色 印象 。” 5 


冷色 系 的 低 纯 度 颜色 给 人 一 种 凉爽 感 ， 使 用 这 些 颜 色 可 让 人 的 心灵 享受 宁静 。 具 有 大 自然 
中 小 草 或 者 绿 树 颜 色 的 配色 是 净化 心灵 的 最 佳 配色 。 在 网 页 配色 中 ， 使 用 低 灰色 调 可 以 体现 安 
稳 ， 使 用 低 纯 度 可 以 体现 出 民意 ， 使 用 淡 弱 色调 可 以 体现 出 安静 ， 如 图 15-7 和 图 15-8 所 示 。 


， 该 网 页 中 使 用 的 灰 ， 
,色调 首先 给 了 浏览 ， 
， 者 以 安稳 的 印象 , 少 | 
, 量 的 暗色 强调 了 明 ， 
| 度 对 比 ， 在 安稳 中 带 ， 
， 着 宁静 致远 、 与 世 无 ， 
| 争 的 意味 ， 瞳 紫色 | 
| 的 加 入 给 人 以 依赖 、; 
松 的 感觉 。 | 


Home AsOUT mews 


~- 


sTARTSWIANYOU | 这 是 一 个 旅游 度假 网 页 ， ! 

oo | 深蓝 色 的 主 图 给 人 以 追求 ， 
| 自由 的 感受 ， 优 雅 而 低调 ， 
< 的 浅 灰色 不 经 意 间 营 造 出 ， 
， 自然 而 温驯 的 氛围 。 低 纯 ， 
| 度 的 蓝 绿色 和 蓝 色 能 够 稳 | 
， 定 躁动 不 安 的 情绪 , 给 人 ， 
| 以 心安 与 虱 意 的 感觉 | 


图 15-8 
安静 的 色调 可 以 表现 心情 安定 以 及 没有 任何 嗜 杂 声音 的 场景 。 它 以 纯度 含蓄 的 淡 弱 色调 为 
主 ， 与 明亮 柔和 的 色调 搭配 ， 流 露出 和 谐 与 安宁 的 美感 ， 如 图 15-9 所 示 。 


， 这 是 一 家 高 端 酒店 的 网 页 ， 棕 色 、 
| 蓝 色 、 灰 色 和 黑色 均 为 可 以 体现 男 | 
| 性 性 格 特征 的 颜色 ， 了 明度 差 不 多 的 | 
| 淡 弱 色调 配合 主 图 传达 概念 ， 烘 托 ， 
,了 心情 安定 以 及 没有 任何 嗜 杂 声音 ， 
| 的 场景 ， 以 含蓄 的 淡 弱 色调 为 主 的 | 
| 表现 手法 ， 让 一 些 明 亮 的 色调 点 缀 ， 
， 其 中 ， 流 露出 和 谐 与 安宁 的 美感 。 


VVANUsE mi Ems 


图 15-9 


兴奋 激昂 的 网 页 配色 印象 ”2 


在 网 页 配色 中 ， 运 用 高 纯度 的 色彩 搭配 能 体现 出 兴奋 ， 多 元 素 的 对 比较 高 的 色彩 可 以 体现 
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激情 昂 然 ， 低 色调 为 主 的 高 明度 点 缀 或 过 渡 页 面 可 以 体现 出 动感 ， 如 图 15-10 所 示 。 
低 色 调 给 人 沉稳 的 感觉 ， 表 面 看 起 来 很 安静 ， 隐 约 透 露出 一 种 动感 ， 使 用 给 人 兴奋 感觉 的 
颜色 作为 基色 ， 搭 配 温暖 感 觉 的 色调 ， 使 整个 页 面 更 加 突出 ， 如 图 15-11 所 示 。 


:二 
| 该 网 页 使 用 高 纯度 的 黄 、 红 、 蓝 、 绿 等 对 比较 高 的 ，。 ， 该 网 页 中 主体 上 使 用 低 色 调 ， 首 先 给 人 以 沉稳 的 印 | 
| 颜色， 再 加 上 和 粉色、 白色、 绿色 、 棕 色 等 色彩 ， 大 ， ， 象 ， 表 面 上 看 起 来 很 安静 ， 高 明度 的 点 组 ， 阴 障 中 
， 量 的 色彩 运用 ， 高 度 符合 页 面 主题 ， 给 人 极 强 的 视 ， ， 高光 的 穿 透 感 ， 加 入 点 组 的 红色 带 来 的 温暖 给 人 奋 
| 觉 冲 击 ， 令 人 感觉 兴奋 和 生动 。 | 进 、 昂 扬 的 心理 感受 。 . 


轻快 律动 的 网 页 配色 印象 5 


颜色 的 轻重 感 和 颜色 三 要 素 中 的 明度 之 问 的 关系 最 为 密切 ， 鲜艳 的 高 明度 色彩 给 人 轻快 的 
感觉 ， 若 同时 再 加 上 白色 ， 则 还 能 增添 清洁 、 明 亮 之 感 ， 如 图 15-12 所 示 。 

使 用 低 色调 的 网 页 ， 同 色 系 的 色彩 搭配 可 以 表现 出 含蓄 的 印象 ， 邻 近 色 的 搭配 可 以 表现 出 
青春 童话 般 的 美妙 联想 ， 使 用 低 纯 度 的 间 色 或 互补 色 搭 配 ， 给 人 以 享受 和 快活 的 感觉 ， 如 
图 15-13 所 示 。 


| 茶色 无 论 是 在 纯度 还 是 在 明度 上 ， 都 给 人 以 柔和 的 ， ;该 网 页 中 低 色调 的 主 图 占用 了 大 量 的 面积 ， 色 彩 措 | 
| 印象 ， 乘 后 气息 的 粉红 色 和 中 庸 的 灰色 的 搭配 不 仅 ， ”“; 配给 人 以 低调 、 华 丽 的 印象 ， 黄 色 、 白 色 、 黑 色 的 | 
清晰， 而 且 给 人 以 轻松 、 履 到 的 感觉， 且 非 党 具有 ， ， 加 入 使 整个 页 面 变 得 动感、 美妙 、 趣 味 横 生 ， 突 出 | 
， 亲和力。 ， ;这 染 了 享受、 快乐 的 感觉 。 

图 15-12 图 15-13 


清爽 自然 的 网 页 配色 印象 2% 


给 人 以 清爽 、 自 然 的 色彩 印象 ， 就 像 大 自然 的 气息 ， 能 让 人 感受 到 希望 的 力量 ， 经 常用 于 
网 页 设计 和 广告 设计 中 ， 如 图 15-14 所 示 。 


在 网 页 配色 中 ,使 用 对 比 色 搭 配 , 能 呈现 出 清爽 、 透 彻 的 感觉 
使 用 明度 高 的 冷色 可 以 体现 您 用 ， 加 入 暖色 的 协调 和 点 缀 可 以 体现 阳光 ， 


oy 


» PE DECOUVREZ COMMENT 
FAIRE DES CHOIX 
DURABLES EN MACASIN 
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,使 用 同色 系 色调 可 以 体现 天 然 ， 
如 图 15-15 所 示 。 


| 该 网 页 中 以 蓝 色 为 主 色 ， 明 度 和 纯度 的 变化 使 页 面 ，。 ;该 网 页 中 的 浅 蓝 色 背景 ， 拱 配 页 面 中 的 白色 云 亲 ， | 
| 显得 清 夹 ， 彰 显 了 天 然 性 ， 白 色 和 红色 的 加 入 ， 使 ，。 ， 给 人 以 轻巧 广阔 的 印象 ， 漫 画 中 的 绿色 和 栓 色 ， ， 
| 整个 页 面 不 会 显得 过 于 冰冷 ， 增 加 了 些许 灵动 感 和 ”显得 生机 盘 然 ， 更 给 人 以 辽阔 和 包罗 万 象 的 感受 ， | 
, 异 意 感 ， 修 闲 之 中 蕴 合 着 些许 阳光 的 明媚 气息 ， 使 ;整体 页 面 显得 清 夹 、 明 快 、 自 然 、 和 谐 ， 给 浏览 者 ， 
， 人 感到 欢乐 和 愉悦 。 “以 舒适 、 民 意 的 感受 。 

图 15-14 图 15-15 


浪漫 甜美 的 网 页 配色 印象 ” ? 


浅 淡 的 色调 能 给 人 一 种 清澈 透明 的 视觉 享受 ， 营 造 出 典雅 、 浪 漫 的 氛围 。 以 浅 淡 的 紫色 与 
丁香 色 为 主 ， 给 浏览 者 一 种 腊 螺 的 梦幻 感觉 ， 如 图 15-16 所 示 。 


pure” | rrr 
a 
r 时 | 
Skin Care A 
CLEANSE. BALANCE. F RESTORE. n s 
I 励 ER 


| 丁香 色 是 一 种 有 着 含 车 女 | 
， 性 印象 的 温柔 紫色 ， 用 它 | 
， 搭配 明亮 清新 的 色彩 ， 可 | 
， 以 表现 和 谐 感 。 该 网 页 中 ， 
使 用 丁香 紫 、 浅 茶色 和 棕 ， 
， 色 进行 措 配 , 给 人 以 合营 、 ， 
， 温 和 、 安 定 的 印象 ， 浅 绿 ， 


二 和 | | 
i | 
jms 


i 
| 加 | | 上 ; 
| 
Bi 

"| | 


， 色 和 浅 蓝 色 为 整个 页 面 增 | 
， 添 了 温 茧 与 活力 。 | 
图 1516 
甜美 使 人 联想 到 糖果 、 冰 淇 淋 、 点 心 等 甜 味 食品 ， 甜 食 使 人 感到 心情 愉快 ， 甜 美 所 表现 出 


的 色调 也 可 传达 出 一 种 天 真 、 快 乐 的 感觉 ， 如 图 15-17 所 示 。 
如 同 冬日 的 阳光 一 样 ， 高 纯度 色调 给 人 温暖 ， 和 象征 着 丰富 、 光 辉 和 美丽 ， 适 用 于 表现 开放 
的 年 轻 人 ， 与 同类 色 、 邻 近 色 搭配 ， 色 调 统 一 而 不 失 奔 放 ， 如 图 15-18 所 示 。 


糖果 色 为 高 纯度 、 
， 蓝 色 、 明 相 紫 、 检 术 黄 等 天 密 的 女性 色彩 为 主 色调 
， 像 /时 收集 的 级 ， 有 明亮 显 归 


太 配 色 来 例 46: 休闲 食品 网 页 配色 ”( 傅 ) 


说 起 甜点 ， 


页 的 制作 ， 学 习 如 何 将 深 
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高 明度 的 鲜艳 颜色 ， 以 粉色 、 粉 


图 15-17 


一 般 给 人 甜蜜 而 又 五 彩 缤纷 的 感觉 


| 案例 类 型 


深沉 的 颜色 与 其 他 多 彩 的 颜色 搭配 。 


[ea ne e222 
benefit EE 


re yo ovorte proovets before theyve gone for aoar 


CD CHE-abnation! : 
人 


， 该 网 页 中 使 用 高 纯度 、 高 明度 的 桃红 色 搭配 ， 色 调 ， 


和 柔和, 给 人 以 情感 细腻 、 温 柔 的 感觉 , 与 黑色 、 白 色 、 
橘 黄色 进行 搭配 ， 给 人 以 青春 靓丽 的 感受 ， 体现 出 | | 


。 下面 通过 一 个 卡通 甜点 网 


棕色 、 咖 啡 色 、 绿 色 、 品 红色 


#694429 
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加 ”设计 分 析 

@ 整个 页 面 虽然 没有 使 用 大 范围 的 棕色 ， 却 起 到 了 很 重要 的 作用 ， 使 页 面 看 起 来 色彩 鲜艳 
又 不 轻浮 。 

@ 将 棕色 的 文字 散布 于 页 面 中 ， 与 背景 颜色 呼应 ， 使 页 面 看 起 来 更 加 稳重 。 

@) 使 用 浅 棕色 做 主 色 ， 页 面 鲜亮 而 突出 。 加 入 少许 绿色 作为 辅助 ， 突 出 了 绿色 健康 主题 的 
同时 ， 给 人 以 健康 的 感觉 。 


Err 


BR or ne 33 
名 ”延伸 方案 
\W 可 延伸 的 配色 方案 x 不 推荐 的 配色 方案 


! 配色 评价 | 
| 粉色 给 人 犹如 少女 般 娇 同 、 可 爱 的 印 银 ， 使 用 在 西点 网 页 } 蓝 色 纯净 而 曲 远 ,较为 清洁 的 蔚蓝 色 无 法 映 和 西点 的 甜 脏 ， 


的 甜美 气息 | 不 适合 作为 食品 页 面 的 主 色 。 


| 应 用 于 食品 网 页 ; 应 用 于 业务 推广 网 页 | 
GD 背景 色 的 明度 渐渐 提高 到 主体 颜色 ， 变 化 较为 缓慢 ，; 使 用 棕色 作为 背景 释放 着 一 种 高 贵 而 又 质朴 的 气息 ，; 

使 页 面 整个 色调 较为 柔和 、 不 沉重 。 零 星 的 绿色 形成 } 给 人 以 稳重 而 又 奢华 的 感觉 。 以 同色 系 不 同色 相 和 高 ; 
一 个 三 角形 ， 起 到 了 装点 页 面 的 效果 ， 又 不 失 稳重 。 | 亮度 的 颜色 作为 主 色 ， 突 出 主体 的 同时 ， 给 人 眼前 一 | 


页 面 下 方 的 白色 文字 与 上 方 的 白色 图 案 相 呼应 ， 既 稳 } 亮 的 新 鲜 感 。 ! 
定 了 页 面 ， 又 不 显得 背景 突 无， 为 严肃 的 页 面 添加 了 ; @ 以 小 块 鲜亮 的 红 橙色 作为 辅 色 ， 提高 页 面 兆 眼 度 的 同 ， 
活跃 的 气氛 。 i 时， 减少 视觉 疲劳 一举 两 得 。 白 色 的 文字 起 到 了 锦 ' 
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橄榄 绿 与 同类 色 、 邻 近 色 搭配 时 ， 给 人 带 来 传统 、 友 好 、 和 善 的 感觉 ， 与 对 比 色 搭 配 ， 显 
得 尊贵 高 雅 ; 在 灰色 调 中 ， 起 到 一 定 的 收敛 作用 ， 有 着 稳重 、 威 严 的 色彩 意向 ， 如 图 15-19 和 
和 15-20 所 示 。 


到 
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Nao deixe a beleza da sua pele 


OF THE BEST KEPT 


耐克 cc 在 


二 
| 该 网 页 使 用 传统 风格 的 橄 模 绿 和 新 鲜 的 苹果 绿 作为 灰 绿 色 稳重 而 充满 威严 ， 使 用 红色 作为 点 绿色 ， 是 ， 
， 主 色 ， 使 用 深 紫 色 作为 辅 色 。 整 个 页 面 给 人 清新 、 个 性 和 情趣 的 体现 ， 与 柔和 的 黄色 和 浅 绿 搭配 ， 色 ， 


| 健康 的 感觉 ， 将 产品 的 主题 完美 呈现 。 页 面 中 白色 彩 分 明 ， 表 现 出 严肃 的 感觉 。 低 明度 的 色调 体现 出 | 
| 的 文字 ， 清 晰 呈现 了 产品 品牌 和 广告 语 ， 整 个 页 面 沉稳 的 印象 ， 搭 配 明度 较 低 的 颜色 ， 给 人 一 种 厚重 | 
| 对 比较 强 却 不 失 宁 静 感 ， 有 一 种 特别 的 味道 。 | ， 深邃 的 感觉 。 | 


图 15-19 图 15-20 
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雍容 华贵 的 色调 常用 来 表现 浓郁 、 高 雅 的 情调 与 热情 奔放 的 情感 ， 还 能 表现 出 女性 的 柔美 
多 情 ， 常 用 来 表现 女士 的 礼服 。 根 据 色调 的 差异 还 可 以 表现 温暖 时 尚 的 效果 。 

在 网 页 配色 中 ， 鲜 艳 、 刺 激 、 对 比 强 的 炫 彩色 调 可 以 体现 出 雍容 华丽 的 视觉 效果 ， 低 明度 
色调 能 够 体现 华贵 、 高 纯度 色调 能 够 体现 华丽 ， 如 图 15-21 和 图 15-22 所 示 。 


由 IMMEL peuas caneeok nnmaaua owenmy OvaP 


| 该 网 页 中 使 用 红色 、 品 红色 、 橙 色 和 黄色 等 纯度 和 “， ' 深 紫 色 和 了 暗 红色 的 明度 较 低 ， 表 现 华贵、 典雅 的 气 | 


| 明度 较 高 的 暖色 构成 炫 彩色 调 ， 体 现 出 雍容 、 华 丽 、 氛 ， 使 用 浅 紫色 过 渡 ， 烘 托 出 浪漫 的 情怀 ， 高 纯度 | 

， 奔放 的 感觉 。 整 体 页 面 时 尚 、 刺 激 、 丰 富 ， 对比 强 烈 ， 的 桃红 色 、 桃 粉色 给 人 以 高 贵 、 时 尚 、 典 雅 的 现代 感 ，| 

， 引 人 注目 。 ; ， 尽 显 女 性 魅力 。 | 
图 15-21 图 15-22 


15.10 艳丽 的 网 页 配色 印象 be 


鲜艳 的 色调 总 是 让 人 感觉 明快 、 艳丽 , 令 人 振奋 , 它 有 着 引 人 注 目的 能 量 , 能 给 人 带 来 温暖 ， 
也 是 具有 春天 气质 的 颜色 ， 常 用 来 表现 春天 百花 齐 放 的 美丽 。 

艳丽 风格 的 配色 使 用 视觉 上 引 人 注 意 的 图 像 ， 能 左右 人 们 的 视线 。 提 高 纯度 、 和 谐 地 使 用 
多 种 颜色 ， 能 给 人 一 种 鲜艳 的 感觉 。 在 网 页 配色 中 ， 高 明度 的 色彩 搭配 可 以 体现 出 明媚 ， 高 纯 
度 的 色彩 搭配 可 以 体现 出 娇艳 ， 如 图 15-23 所 示 。 

牡丹 粉 是 一 种 明艳 的 粉 紫红 色 ， 娇 艳 无 比 ， 它 代表 着 明媚 的 春光 和 无 限 的 春色 ， 是 一 种 十 
分 美好 的 颜色 ， 如 图 15-24 所 示 。 
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Kako beba mmste7 f= 二 
上 1 | eS A he ohh 1 
| 该 网 页 中 使 用 青绿 色 、 黄色 、 牡丹 粉 多 种 高 纯度 明艳 、， 。 ， 该 网 页 中 使 用 牡丹 粉 与 高 明度 或 高 纯度 的 蓝 色 、 青 | 
| 丰富 的 色彩 ， 在 视觉 上 十 分 引 人 注 意 ， 左 右 着 人 们 ， 色 进 行 搭配 ， 显 得 特别 传神 、 引 人 注目 ， 且 营造 出 | 
| 的 视线 ， 给 人 以 鲜艳 、 艳 丽 的 印象 。 整 个 页 面 呈现 ， ， 一 种 阳光 明媚 的 愉快 气氛 | 
出 明快 欢乐 的 氛围 
图 15-23 图 15-24 
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主题 明确 和 整体 融合 是 优秀 网 页 设计 的 重要 因素 ， 如 果 主 题 不 够 明确 、 整 体 不 够 融合 ， 就 会 让 浏览 
者 心烦 意 乱 ， 配 色 整 体 也 会 缺乏 稳定 感 ， 会 失去 网 页 制作 的 初衷 ， 也 会 使 网 页 的 宣传 力度 和 广告 效果 
大 打折 扣 。 


突出 主题 的 配色 技巧 ® 
二 明确 主题 ， 形 成 焦点 


主题 突出 是 优秀 网 页 设计 的 最 重要 条 件 ， 能 够 聚焦 浏览 者 的 眼光 ， 在 视觉 上 形成 一 个 中 心 点 ， 
明确 地 阐述 主题 ， 对 整个 网 页 设计 来 说 有 着 重要 意义 。 如 果 主题 不 够 明确 ， 就 会 让 浏览 者 心烦 意 乱 ， 
无 虫 顾及， 失去 网 页 存在 的 意义 。 
突出 网 页 主题 的 方法 有 两 种 ， 一 类 是 直接 增强 主题 的 配色 ， 保 持 主题 的 绝对 优势 ， 可 以 通过 
提高 主题 配色 的 纯度 、 增 大 整个 页 面 的 明度 差 来 实现 。 另 一 类 是 间接 强调 主题 ， 在 主题 配色 较 弱 
的 情况 下 ， 通 过 添加 衬托 色 或 削弱 辅助 色 等 方法 来 突出 主题 的 相对 优势 ， 如 图 16-1 和 图 16-2 
所 示 。 
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5 当 | 


Novosti 


| 该 网 页 中 的 主题 图 片 鲜艳 、 亮 丽 ， 使 用 白色 和 黑色 该 网 页 中 通过 浑浊 、 模 糊 背景 的 方法 ， 来 间接 突出 ， 
| 搭配， 直接 增加 了 主题 的 艳丽 感 和 吸引 力 ， 使 主题 主题 ， 黑 色 与 淡 黄色 的 高 强度 对 比 明显 成 为 视觉 中 ， 
| 处 于 绝对 重点 突出 的 地 位 ， 保 持 了 主题 图 片 在 整个 心 ， 显 得 分 明 、 硬 朗 、 约 束 ， 在 整个 页 面 中 形成 强 ， 
| 页 面 中 的 绝对 优势 . ， 势 的 体现 。 | 
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6 提高 纯度 ， 确 定 主题 > 


在 网 页 配色 中 ， 为 了 突出 网 页 的 主要 内 容 和 确定 网 页 的 主题 ， 提 高 主题 区 域 的 色彩 纯度 是 最 有 
效 的 方法 。 纯 度 就 是 鲜艳 度 ， 当 主题 配色 鲜艳 ， 与 网 页 背景 和 其 他 内 容 区 域 的 配色 相 区 分 ， 就 会 达 
到 确定 主题 的 效果 ， 如 图 16-3 和 图 16-4 所 示 。 


Birlikten Kuvvet Dogar Lezzet Kampanyalar 


3 a 


该 网 页 中 大 面积 、 高 纯度 的 红色 构建 了 ， ， 在 上 面 的 两 个 页 面 中 ， 使 用 了 鲜艳 度 很 离 | 
页面 中 的 主要 区 域 ， 形 成 了 视觉 的 焦点 ， ， ， 的 颜色 作为 背景 的 页 面 比 纯 白 背景 的 页 面 ， 
| 使 这 个 区 域 中 的 内 容 成 为 表达 的 重心 ， ， 更 能 突显 页 面 的 主题 。 无 论 是 主题 还 是 灰 | 
， 搭配 纯度 较 高 、 明 度 低 的 蓝 色 , 对 比 鲜明 ，， ， 色 按钮 ， 在 蓝 色 背景 上 都 显得 更 加 清晰 
| 整体 协调 ， 主 题 的 表达 方式 显得 更 加 强 ， 更 有 利于 浏览 者 快速 理解 并 使 用 。 
| 势 有 力 。 | | 

图 16-3 图 16-4 


党 号 3 增 大 明度 差 0, 


明度 就 是 明暗 程度 ， 明 度 最 高 的 是 白色 ， 明 度 最 低 的 是 黑色 ， 任 何 颜色 都 有 相应 的 明度 值 ， 
同 为 纯色 调 ， 不 同 的 色相 明度 也 不 相同 ， 例 如 黄色 明度 最 接近 白色 ， 而 紫色 的 明度 靠近 黑色 ， 如 
16-5 所 示 。 


Cecosillas 


， 该 网 页 中 的 橙色 和 蓝 色 明度 对 比 ， 
， 鲜明 ， 相 比 于 蓝 色 的 沉静 ， 橙 色 
， 显 得 明亮 、 跳 跃 ， 两 者 的 搭配 构 
才 成 了 动静 皆 宜 的 表达 方式 ， 空 间 
| 感 、 层 次 感 分 明 突出 ， 确 定 了 主 
， 体 在 页 面 中 的 重要 地 位 ， 成 为 整 ， 


> #0 ee: 


设计 网 页 时 ， 可 以 通过 无 彩色 和 有 彩色 的 明度 对 比 来 突显 主题 。 例 如 ， 网 页 背景 是 色彩 比较 丰 
富 的 ， 主 题 内 容 是 无 彩色 的 白色 ， 可 以 通过 降低 网 页 背景 明度 来 突显 主体 色 ， 相反， 如 果 提 高 背景 
的 色彩 明度 ， 相 应 地 就 要 降低 主题 色彩 的 明度 ， 只 要 增强 明度 差异 ， 就 能 提高 主体 色彩 的 强势 地 位 ， 
如 图 16-6 所 示 。 
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， 的 明度 对 比 ， 背 景 使 用 暗淡 浑浊 ， 
， 的 灰色 ， 使 作为 主 色 的 红色 更 加 ， 
| 突出、 鲜明 , 具有 强 对 比 的 绿色 ， 

， 在 层次 上 处 于 衬托 和 被 压制 的 角 | 
， 色 ， 使 主体 色彩 极为 强势 


图 16-6 


当 网 页 主题 的 配色 比较 普通 、 不 显眼 时 ， 可 通过 在 其 附近 装点 鲜艳 的 色彩 为 网 页 中 的 主要 内 容 
区 域 增添 光彩 ， 这 就 是 网 页 中 的 点 级 色 。 在 网 页 中 对 于 已 经 确定 好 的 配色 ， 点 级 色 能 够 使 整体 更 加 
鲜明 和 充满 活力 ， 如 图 16-7 所 示 。 


,该 网 页 中 的 点 缀 色 为 绿色 和 楼 ， 
， 色 ， 点 级 色 面 积 较 小 ， 既 装点 了 | 
主体 ， 又 不 会 破坏 网 页 的 整体 配 ， 
， 色 。 点 级 色 的 面积 如 果 太 大 ， 就 | 
会 在 网 页 中 升 为 仅 次 于 主体 色 的 | 
， 辅 助 色 ， 从 而 打破 了 原来 的 网 页 ， 
， 基 础 配色 。 加 强 色彩 点 组 的 目的 ， 
， 只 是 为 了 强调 主题 ， 但 不 能 破坏 | 
， 网 页 的 基本 配色 。 | 
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图 16-7 
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抑制 辅助 色 或 


浏览 大 部 分 网 页 时 ， 会 发 现 突出 网 页 主题 的 色彩 会 比较 鲜艳 ， 视 觉 上 会 占据 有 利 地 位 ， 但 不 是 
所 有 网 页 都 采用 鲜艳 的 颜色 去 突出 主题 。 

根据 色彩 印象 ， 在 网 页 配色 中 ， 主 体 使 用 素雅 的 色彩 也 很 多 ， 所 以 就 要 对 主体 色 以 外 的 辅助 色 
和 点 缀 色 稍 加 控制 ， 如 图 16-8 所 示 。 

当 网 页 的 主体 色彩 偏 柔 和 、 素 雅 时 ， 背 景 颜色 在 选择 上 要 尽量 避免 纯色 和 暗色 ， 用 淡色 调 或 浊 
色调 ， 就 可 以 防止 背景 色彩 的 过 分 艳丽 导致 网 页 主题 的 不 够 突出 ， 影 响 整 体 风格 。 总 的 来 说 ， 削 弱 
辅助 色彩 和 背景 色彩 有 利于 主体 色彩 变 得 更 加 醒目 。 


< 
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Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit. 


为 低 瞳 的 深 褐色 作为 背景 时 ， 紫 | 
色 呈 现 出 亮丽 的 状态 ， 依 然 可 以 | 
， 引 和 注目 。 : 


图 16-8 


六 配色 案例 47: 室 网 页 配色 { 


工作 室 的 网 页 通常 内 容 不 多 ， 可 以 使 用 大 面积 的 颜色 加 强 浏览 者 的 客观 印象 。 
通过 颜色 固有 的 色彩 意象 ， 向 浏览 者 传达 工作 室 的 信息 和 业务 范畴 。 


天 蓝 色 能 传达 出 信赖 感 ， 让 人 冷静 、 踏 实 ， 适 用 于 商业 类 的 平面 设计 中 。 | 
| 该 案例 大 面积 采用 天 蓝 色 ， 让 人 感到 亲近 。 少 量 黄 色 和 黑色 的 点 缀 增强 了 ， 
! 页 面 的 华丽 感 ， 使 页 面 的 主题 更 加 突出 、 醒 目 、 引 人 注意 。 充分 的 留 白 和 | 


案例 背景 


@ ”设计 分 析 
@ 天 蓝 色 与 同色 系 搭配 ， 具 有 镇 定 、 庄 重 的 效果 ， 给 人 理智 的 印象 ， 能 给 浏览 者 带 来 信赖 的 感 


觉 ， 增 加 工作 室 的 可 信 度 。 
@ 使 用 少量 高 明度 的 黄色 和 红色 点 缀 页面， 在 蓝 色 的 衬托 下 ， 使 页 面 更 加 活 泌 ， 彰 显 魅力 。 页 
面 底部 恰当 的 留 白 能 够 表现 舒适 的 感觉 。 


[Em 
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句 ”绘制 步骤 


1 第 4 步 ， 插 入 文字 和 形状 ， 完 成 留 白 内 容 的 制作 。 


名 ”延伸 方案 


V 可 延伸 的 配色 方案 


配色 评价 : 
1@ 绿色 的 加 入 可 以 给 人 生机 矢 然 的 感觉 ， 给 浏览 者 一 种 健康 


空旷 、 冷静 和 才智 的 感 沉 ， 使 页面 更 上 说服 力 。 ! ”向 上 的 感觉 。 
@ 将 留 白 位 置 填充 为 黄色 ， 加 强 页 面 对 比 的 同时 ， 与 项 部 黄 ;(@ 当 颜 色 明 度 过 高 时 ， 会 感觉 很 轻 ， 绎 织 的 感觉 让 人 觉得 不 
色色 块 相 呼应 ， 突 显 主题 信息 。 ! ” 够 沉稳 。 


Photoshop CC 网 页 配色 设计 全 程 揭 秘 ( 第 2 版 ) 


@ ”相同 色 系 应 用 于 其 他 网 页 


| 应 用 于 旅游 度假 网 页 ， ; 应 用 于 数字 化 设计 网 页 : 
| 页 面 中 辽阔 的 天 空 、 纯 洁 的 白云 让 人 感觉 到 旅行 的 乐趣 与 自 | 网 页 本 身 的 设计 反映 了 这 家 公司 的 实力 ， 采 用 大 面积 的 天 蓝 
| 由 ， 栓 色 的 建筑 群 压制 了 冰冷 的 蓝 色 ， 营 造 出 明朗 、 刺 激 的 | 色 ， 给 人 一 种 冰 爽 、 冷 静 的 感觉 。 小 面积 的 绿色 与 红色 很 好 | 


体 融合 的 配色 技巧 5 


在 进行 网 页 配色 设计 时 ， 在 网 页 主题 没有 被 明显 突出 显示 的 情况 下 ， 整 体 的 设计 配色 就 会 趋向 

融合 的 方向 ， 这 就 是 与 我 们 前 面 所 了 解 的 突出 主题 配色 相反 的 配色 走向 。 
使 用 接近 的 色相 

与 突出 网 页 主题 的 配色 方法 一 样 ， 可 采用 对 色彩 属性 ( 色相 、 纯 度 、 明 度 ) 的 控制 来 达到 融合 的 
目的 。 突 出 网 页 主题 时 ， 我 们 需要 增强 色彩 之 间 的 对 比 性 ， 而 融合 配色 则 完全 相反 ， 是 要 削弱 色彩 
的 对 比 。 
在 融合 的 配色 技法 中 , 还 有 诸如 添加 类 似 色 、 重 复 、 渐 变 、 群 化 、 统 一 色 阶 等 行 之 有 效 的 方法 ， 
如 图 16-9 所 示 。 

formas 


该 网 页 采用 绿色 作为 主 色 ， 表 现 ， 
， 高 尔 夫 运动 的 健康 性 和 休闲 性 。 ， 
， 通 过 使 用 色相 差 较 小 的 黄 绿色 和 ， 
| 天 蓝 色 作为 补 色 ， 使 色彩 彼此 融 ， 
， 合 ， 使 网 页 配色 效果 更 加 稳定 ， ， 
,统一 向 外 传达 主题 | 


> 6 mee: 


使 用 接近 的 色调 


网 页 中 无 论 使 用 什么 色相 进行 组 合 配色 ， 只 要 使 用 相同 的 色调 颜色 ， 就 可 以 形成 融合 效果 ， 同 
一 色调 的 色彩 具有 同一 类 色彩 的 感觉 ， 所 以 在 网 页 中 塑造 了 一 种 统一 的 感觉 。 同 色调 的 色彩 搭配 是 
相 融 性 非常 好 的 配色 方法 ， 能 中 和 色相 差异 很 大 的 配色 环境 ， 如 图 16-10 所 示 。 


| 为 了 突出 页 面 中 产品 的 品质 ， 该 页 | 
| 面 采用 了 灰色 作为 主 色 ， 并 使 用 了 | 
， 灰 色调 的 主 图 。 辅 色 也 采用 不 同 纯 | 
， 度 的 灰色 。 整 个 页 面色 调 统一 ， 主 | 
, 题 明确 。 浏 览 者 在 打开 页 面 时 ,会 | 
， 第 一 时 间 感受 到 灰色 带 来 的 质感 和 | 
， 品 质 。 与 网 页 所 要 表达 的 产品 主题 ， 
| 高 度 一 致 。 | 


图 16-10 


添加 类 似 色 或 同类 色 


在 选择 网 页 色彩 时 ， 数 量 上 尽量 保持 在 两 至 三 种 ， 这 样 会 保持 页 面 的 整体 性 ， 如 果 两 种 色彩 的 
对 比 过 于 强势 , 可 以 通过 加 入 和 两 色 中 的 任意 色相 相近 的 第 三 种 色彩 , 就 会 在 对 比 的 同时 增加 整体 感 ， 
这 种 色彩 在 选择 上 可 以 优先 考虑 相 邻 色 和 类 似 色 ， 如 图 16-11 所 示 。 


UNDO 和 


DONTGETTOST, 

,该 网 页 中 使 用 大 面积 的 黄色 与 小 面 ， 
， 积 的 橙色 和 红色 搭配 ， 同 类 色 搭配 ， 
， 做 到 了 对 比 中 有 统一 ， 协 调 中 体现 ， 
所 分 明 的 配色 手法 ， 给 信 温馨、 上 明亮 | 
,的 色彩 印象 。 浅 灰色 的 背景 颜色 极 ， 
， 好 地 降低 了 页 面 中 主 色 的 喧闹 感 。 

， 整 体 页 面 呈现 出 柔和 、 舒 适 的 气氛 


图 16-11 


= AEN 
六 配色 案例 48: 便利 店 网 页 配色 十 ) 
可 
蓝 色 会 给 人 以 深邃 、 悠 远 、 广 阔 的 印象 ， 而 更 为 骤 和 的 靛 色 则 少 了 几 分 深邃 ， 
多 了 几 分 沉静 ， 温 柔 了 许多 ， 且 给 人 以 清澈 感 ， 与 明丽 的 黄色 搭配 ， 使 冲突 感 不 会 
过 于 强烈 ， 会 给 人 以 明艳 、 愉 悦 、 美 好 的 感觉 。 


案例 背景 
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设计 分 析 


GD 高 纯度 的 色彩 搭配 艳丽 、 丰 富 ， 令 人 愉快 ， 蓝 色 和 黄色 是 对 比 色 ， 对 比 强烈 ， 容 易 引 起 人 的 
注意 ， 给 人 以 赏心悦目 的 感觉 ， 高 饱和 度 的 两 种 色彩 在 起 到 吸引 注意 的 作用 后 ， 又 与 产品 的 颜色 和 
明暗 形成 鲜明 的 对 比 ， 并 且 使 用 完美 的 倾斜 度 ， 成 功 使 产品 在 整个 页 面 中 处 于 重要 地 位 。 

@ 浅 灰 色 和 绿色 进行 搭配 , 虽然 不 会 在 视觉 上 过 于 刺激 眼球 ， 比 较 柔 和 , 但 因为 绿色 明度 较 低 ， 
对 比 也 很 鲜明 ， 成 功 起 到 了 辅助 作用 ， 与 淡 黄 色 的 产品 搭配 显得 艺术 且 雅 致 。 

(@) 下 面部 分 继续 使 用 跳跃 感 极 强 的 黄色 来 吸引 浏览 者 的 注意 ， 使 得 最 底部 的 内 容 不 会 因为 最 上 
面 的 内 容 过 于 突出 而 黯然 失色 。 

@ 上 中 下 三 部 分 层次 、 界 限 分 明 ， 最 不 易 吸 引 目光 的 内 容 放 在 最 重要 的 中 间 位 置 ， 布 局 、 结 构 
合理 ， 整 体 页 面 给 人 以 明快 感 ， 充 满 欢乐 气氛 。 

回 绘制 步骤 


! 第 1 步 : 创建 整体 框架 ， 确 1 第 2 步 ， 添加 主 图 、 形 状 3 步 ， 继续 插入 图 片 、 形 ; ;第 4 步 : 添加 图 片 ， 插 入 形 ， 


| 主 色 和 铺 色 ， 插 和 Logo 和 ; | 状 和 文字 ， 完 成 底部 区 域 的 | 
学， 制作 级。 和 文字 ， 制 作 中 间 部 分 。 


> ss re: 


© 配色 方案 


加 ”延伸 方案 


V 可 延伸 的 配色 方案 


! 配色 评价 : ! 配色 评价 : 

! 使 用 粉红 色 和 黄色 搭配 ， 给 人 活跃 、 可 爱 、 甜 美的 感觉 ， 不 ; 咖啡 色 易 给 人 以 传统 的 印象 ， 追 求 的 是 岁月 的 沉淀 感 ， 与 

| 公 能 吸引 浏览 者 注意 ， 而 且 还 能 成 功 地 表达 产品 的 特点 ， 引 ; ea 但 不 符合 产品 特色 ， 无 法 给 
兴奋 感 和 潮流 感 。 


证 


| 应 用 于 银行 活动 网 页 : : 
; GD 蓝 色 和 黄色 为 主 的 措 配 ， 了 该 网页 中 的 人 物 虽 然 没有 被 放 在 黄金 比例 的 位 置 但 通过 ; 
| 。 独特 的 感觉 ， 加 入 粉色 ，3 种 对 比 强烈 的 颜色 更 加 吸引 浏 颜色 搭配 以 及 线 与 面 的 结构 ， 成 功 地 成 为 视觉 焦点 。 。 
| 。 览 者 的 眼球 。 | @ 明 赵 的 色彩 、 合 理 的 过 渡 、 清 晰 的 结构 以 及 分 明 的 层次 感 


呈现 出 明艳 的 氛围 ， 给 人 Ds; 


@ 整个 页 面 使 用 多 种 高 纯度 色彩 ， 给 人 感觉 有 点 乱 ， 但 很 与 空间 感 ， 使 整个 页 面 充满 新 潮 感 和 趣味 性 。 
意 颜色 与 颜色 之 间 的 衔接 和 过 渡 ， 使 诸多 杂乱 有 序 进行 ， 灰色 的 加 入 可 以 很 好 地 缓解 蓝 色 和 黄色 的 冲突 , 平衡 页 面 ， 
降低 了 烦躁 ， 增 加 了 欢乐 气氛 。 增加 页 面 的 品位 感 。 
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色彩 的 逐渐 变化 就 是 色彩 的 渐变 ， 有 从 红 到 蓝 的 色彩 变化 , 还 有 从 暗色 调 到 明 色 调 的 明暗 变化 。 
在 网 页 配色 中 ， 这 都 需要 按照 一 定 方向 进行 变化 ， 维 持 网 页 的 稳定 和 舒适 感 的 同时 ， 让 其 产生 一 种 
节奏 感 。 

但 有 时 配色 可 能 不 会 按照 色彩 的 顺序 搭配 ， 而 是 将 其 打 乱 ， 这 会 让 页 面 渐变 的 稳定 感 减弱 ， 给 
人 一 种 活力 感 ， 如 图 16-12 所 示 。 但 是 ， 这 种 网 页 配色 方法 可 能 会 造成 页 面色 彩 的 混乱 。 


人 - 


CALLSJUAREL 


BUNSLINGER 


， 该 网 页 中 使 用 绿色 作为 主 色 , 黄色 
| 蓝 色 和 橙色 并 排 使 用 视觉 上 产生 ， 
有 对 比 强烈 的 渐变 效果 ， 维 持 页 面 稳 | 
， 定 的 同时 增加 了 页 面 的 节奏 感 。 页 ， 
, 面 底部 白色 的 运用 ， 很 好 地 降低 了 | 
， 页 面 混乱 感 ， 起 到 整合 页 面 的 作用 。 


在 网 页 配色 中 ， 如 果 色 相差 过 大 ， 想 让 网 页 传达 一 种 平静 、 安 定 的 感觉 ， 可 以 试 着 将 色彩 之 间 
的 明度 靠近 ， 可 以 在 维持 原 有 风格 的 同时 ， 得 到 比较 安定 的 配色 印象 。 

但 在 配色 中 要 注意 , 如 果 明度 差 过 小 , 色相 差 也 会 很 小 , 那么 将 很 可 能 会 导致 页 面 产生 一 种 乏味 、 
单调 的 结果 ， 所 以 在 配色 中 要 依据 实际 情况 将 二 者 结合 起 来 灵活 运用 ， 如 图 16-13 所 示 。 


Jakaomid 


二 该 网 页 中 使 用 了 明度 较 高 的 卡其 色 | 

。 各 党 ， 作 为 主 色 ， 与 同样 明度 较 高 的 蓝 色 ， 

于， 和 棕色 搭配 ,做 到 了 对 比 中 有 统一 ， 

4 协调 中 体现 分 明 的 配色 手法 ， 既 给 ， 

， 人 沉稳 、 安 定 的 印象 ， 又 体现 了 清 

， 激 明 朗 ， 且 整 体 给 人 品质 和 异 意 相 | 
， 莱 的 印象， 呈现 出 柔和 、 舒适 的 气氛 。 


图 16-13 


太 配 色 案 例 49: 传媒 网 页 配色 © 


本 案例 将 完成 一 个 传媒 类 网 站 的 页 面 制作 ， 此 类 网 站 页 面 通常 需要 对 比 强 
烈 、 主 题 明确 ， 在 用 户 第 一 眼看 到 时 就 能 留 下 深刻 的 印象 。 对 比 强烈 的 补 色 搭 
配方 式 非常 适合 制作 此 类 网 站 页 面 。 


> 1 宰 台 页 Ettiaae 半 


1 案例 类 型 


- 群 休 让 位 


蓝 色 搭配 组 合 ， 给 人 一 种 神秘 和 危机 感 。; 
红色 形成 了 鲜明 的 对 比 ， 更 加 彰显 了 玫 红 色 的 激情 与 能 量 ， 整 体 效果 
1 呈现 出 一 种 神秘 和 孤 做 的 霸气 


主要 色相 蓝 色 、 玫 红色、 白色 


加 ”设计 分 析 
GD 深蓝 色 总 能 给 人 一 种 身 临 其 境 的 感觉 ， 与 蓝 色 系 搭配 ， 让 人 更 加 冷静 ， 表 现 出 一 种 冷酷 、 正 
派 的 印象 。 
@ 少量 玫 红 色 的 点 级， 激发 浏览 者 的 积极 性 ， 展 现 激情 ， 突 出 页 面 主题 内 容 。 
(8) 搭配 简洁 的 白色 文字 ， 既 便于 浏览 者 阅读 ， 又 向 浏览 者 传达 出 了 智慧 、 理 性 的 效果 。 
名 绘制 步骤 


只 


;第 3 步 : 输入 文字 ， 给 抽 
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© 配色 方案 


回 ”延伸 方案 
V 可 延伸 的 配色 方案 


io 636 


br 更 运 全 表现 攻势 待 


Pasja tworzenia 


应 用 于 生活 类 网 页 : 


) 大 面积 的 深蓝 色 ， f 没 有 过 分 的 华丽 与 独特 的 样式 ， 却 展 ;GD 天 
示 出 自己 的 尖端 技术 与 安全 性 。 ! ” 色 绿色 ， 给 人 一 种 柔 静 的 感觉 
) 白云 与 图 片 的 点 级 使 冷静 呆板 的 氛围 大 大 得 到 改善 。 页 面 ; @) 一 些 玫 红 色 为 页 面 增添 了 几 分 韵味 ， 体 现 了 现代 都 市 的 简 ; 


整体 效果 呈现 出 极端 的 冷静 、 高 科技 和 酷 炫 的 感觉 。 。 ; 


著 色 给 人 一 种 低调 的 品位 。 没 有 华丽 的 色彩 ， 搭 配 邻 近 


[17.1 叶 使 用 配色 软件 ColorKey Xp 5 


ColorKey 是 由 Quester 主导 开发 、Blueidea.com 软件 开发 工作 组 测试 发 行 的 配色 辅助 工具 ， 最 
新 版 本 为 ColorKey Xp Beat5。 

它 可 以 使 用 户 的 配色 工作 变 得 更 加 轻松 和 更 有 乐趣 ， 使 用 户 的 配色 方案 得 以 延伸 和 扩展 ， 从 而 
使 作品 更 加 丰富 和 绚丽 。 


ColorKey 所 采用 的 体系 (Color System)， 是 以 国际 标准 的 “ 蒙 塞 尔 (Munsell 色彩 体系 ”配色 标 
准 和 Adobe 标准 的 色彩 空间 转换 系统 为 基准 的 。 

程序 采用 了 与 标准 图 形 图 像 设计 软 件 兼容 的 色彩 分 析 模 式 和 独创 的 配色 生成 公式 ， 使 一 切 色 彩 
活动 都 受 严格 控制 。 程 序 在 合理 的 配色 范围 内 也 允许 用 户 发 挥 自主 性 ， 使 配色 方案 更 能 适应 不 同 的 
需求 。 


蒙 塞 尔 (Munsell) 色彩 体系 是 由 美国 色彩 学 家 蒙 塞 尔 (Albert H. Munsell,1858 一 1918 年 ) 研究 开发 的 ， 是 世界 著名 
三 大 体系 之 一 。 这 一 体系 经 过 美国 国家 标准 局 和 光学 学 会 的 反复 修订 ， 成 为 色彩 界 公认 的 标准 色 系 。 


程序 按照 蒙 塞 尔 色 彩 体系 的 配色 原理 ， 对 色彩 的 搭配 进行 了 补 色 配 合 、 同 类 色 配 合 和 对 比 色 配 
合 等 不 同 分 类 。 最 新 的 ColorKey Xp Beat5 版 本 中 扩展 了 对 配色 区 域 的 色彩 调整 功能 ， 使 设计 者 可 以 
更 大 限度 地 控制 色彩 倾向 ， 并 为 Web 色彩 提供 了 Web 安全 色 接近 模式 。 


fas 7 on 


新 增 了 色彩 配色 方案 的 输出 模式 ， 修 改 了 原 有 HTML 输出 的 面貌 ， 使 色彩 代码 可 以 更 好 地 显示 和 使 用 。 通 过 使 
用 AI 格式 色彩 配色 方案 输出 扩展 了 ColorKey 的 适用 范围 。 
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2 安装 与 启动 软件 ”人 E 

ColorKey Xp 是 一 款 简单 易 用 的 配色 软件 ， 下 面 针 对 软件 的 操作 界面 、 色 彩 控制 面板 、 外 部 拾 色 
器 和 输出 功能 等 方面 全 方位 介绍 基本 的 使 用 方法 。 

下 载 安 装 包 后 ， 双 击 安装 程序 ， 可 以 进入 安装 界面 ， 如 图 17-1 所 示 。 连 续 单 击 Next 按钮 至 最 
后 一 步 ， 单 击 Install 按钮 ， 启 动 安装 ， 如 图 17-2 所 示 。 安 装 ColorKey Xp 之 后 ， 可 以 在 桌面 上 看 到 
ColorKey Xp 软件 的 快捷 图 标 ， 双 击 该 图 标 可 以 打开 该 软件 ， 或 者 在 “开始 ”菜单 中 找到 相应 的 程序 
并 单 击 打 开 。 


Ready to Install 
Welcome to the Quester's Sehup， ready to begin instaling Guesters Colorkey Xp comput 
ColorKey Xp Setup Wizard 和 ” > 


This linsall Colorkey Beta 50 on your computer Cick nstal to continue wah the instalation or clck Back fyou want to review or 
change any setings 
Destination directory 
CANColorkey 
Sa Menu folder 
Questers Colorkey Xp 


ktis recommended that you close 吉 other applications before 
continung 


Cick Next to continue. or Cancel to ext Setup. 


Addaonal tasks: 
Create a desktop icon 


图 17-1 图 17-2 


进入 软件 , 首先 看 到 的 是 选择 界面 ,如 图 17-3 所 示 。 目 前 "另类 锋芒 " 版 本 在 体验 版 中 还 没有 发 布 ， 
单 击 “ 传 统 经 典 ” 按钮， 进入 软件 操作 界面 ， 如 图 17-4 所 示 。 


@ 时 这 里 ColorKey 的 高 级 使 用 选 硕 _ 


调整 榨 色 限制 | 殉 人 
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CK 


| 经 对 好 色 ， 配 色 精 小 


CI) (Web 3 S00000 oo)] 
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Currier’s Calor Key 


图 17-3 图 17-4 


下 和 界面 及 功能 区 域 。 @ 


软件 界面 左上 角 显 示 当 前 操作 的 文字 说 明 或 解释 。 界面 右上 角 分 别 是 “返回 开始 菜单 "按钮 和 " 关 
闭 ”按钮 。 左 下 角 为 功能 按钮 。 界 面 中 间 左 侧 显示 的 19 个 六 边 形 色 块 是 软件 的 配色 区 域 。 其 正中 间 
的 色 块 为 基色 ， 用 户 自 定义 此 颜色 进行 色彩 搭配 ， 而 其 他 色 块 将 根据 自 定义 的 色彩 来 调整 配色 方案 ， 
如 图 17-5 所 示 。 


三 


eg 第 了 7 章 信用 软件 


及 议 里 星 Colorkey 的 高 级 使 用 选项 @@ | 


| 

| 

ET 
[E77 


,功能 按钮 | EE 
a 的 出 可 忆 方 当 ] (一 忆 闻 本 局 /空格 鱼池 


图 17-5 


在 任何 色 块 上 单 击 和 鼠标， 都 会 查看 当前 色 块 的 RGB 色彩 值 ， 以 及 HEX( 十 六 进 制 ) 色彩 值 


操作 界面 右 侧 有 4 个 色彩 控制 面板 ， 其 中 “调整 配色 限制 阀 值 ”面板 和 “整体 色彩 偏 移 ”面板 
提供 调整 的 高 端 功 能 。 善 用 细节 调整 ， 可 以 获得 更 好 、 更 灵活 的 配色 方案 。 


“RGB 色彩 调节 器 ”面板 


“RGB 色彩 调节 器 ”面板 可 以 通过 拖 动 滑 块 或 者 直接 输入 数值 来 产生 RGB 色彩 。 在 色彩 条 上 
单 击 鼠标 ， 也 可 以 使 滑 块 迅速 移动 到 单 击 位 置 。 

在 调节 器 左 侧 的 色彩 方块 中 可 以 及 时 浏览 当前 所 配 的 颜色 ， 单 击 该 色 块 ， 可 以 将 当前 调配 的 色 
彩 显示 在 六 边 形 的 基色 块 上 ， 如 图 17-6 所 示 。 


是 >2> 拉 下 色 块 可 应 用 当 亲 i 所 色 到 主 色 @@ 
[ ET 
[a ep 
久 电 向 ;Web 模式 或 RGB 模式 的 
< 数值 来 调整 颜色 ， 然 后 单 | 
EC 二 击 色 块 ， 确 定 该 颜色 为 主 | 
A I : ， 色 ， 主 色 被 放 在 配色 区 域 | 
最 中 间 位 置 。 | 


= 汪 “调整 配色 限制 闵 值 ”面板 龟 


“调整 配色 限制 阀 值 ”面板 中 显示 的 是 默认 设置 ， 如 果 想 要 得 到 更 多 样 化 的 组 合 ， 可 以 调整 色 
彩 HSB 参数 ， 调 整 后 单 击 “ 刷 新 配色 ”按钮 或 按 下 空格 键 ， 即 可 刷新 配色 ， 如 图 17-7 所 示 。 


Ea 
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“整体 色彩 偏 移 ” 面板 中 有 “全 部 加 亮 ”“ 全 部 减 暗 ”“ 接 近 主 色 ”“ 接 近 补 色 ”和 “全 部 为 
Web 安全 色 " 5 个 选项 , 可 以 根据 需要 单 击 各 选项 来 调整 与 主 色 的 关系 , 当 调整 好 适合 的 色彩 方案 后 ， 
通过 单 击 “ 全 部 为 Web 安全 色 ” 按 钮 ， 会 得 到 与 所 见 色彩 最 为 接近 的 Web 安全 色 ， 该 选项 对 网 页 
设计 者 来 说 是 一 个 极其 实用 的 功能 ， 如 图 17-8 所 示 。 


[es “Web 颜色 调节 ”面板 


“Web 颜色 调节 ”面板 完全 展开 时 ， 可 以 提供 256 种 网 络 安全 色 。 另 外 ， 用 户 还 可 以 在 该 面板 
底部 的 “Web 颜色 ”文本 框 中 输入 或 者 粘贴 色彩 值 ， 如 图 17-9 所 示 。 


图 17-9 


第 了 7 章 ， 使 用 配色 软件 | 


于 使 用 ColorKey Xp 外 部 拾 色 器 压 


在 操作 界面 中 单 击 “ 启 动 外 部 拾 色 器 ”按钮 ， 弹 出 “外 部 拾 色 器 ”面板 ,在 打开 的 “外 部 拾 色 器 ” 
面板 中 单 击 “ 吸 管 ” 图 标 ， 在 屏幕 范围 内 吸取 所 需要 的 颜色 ， 如 图 17-10 所 示 。 
单 击 色 块 ， 打 开 “ 颜 色 ” 面板 ， 可 以 选择 现 有 颜色 或 通过 各 项 参数 设置 颜色 ， 如 图 17-11 所 示 。 
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图 17-10 图 17-11 
在 面板 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 可 以 选择 不 同 的 色彩 代码 格式 ， 在 ColorKey Xp 的 
RGB 文本 框 中 输入 RGB 数值 ， 然 后 单 击 “ 刷 新 配色 ”按钮 ， 即 可 在 色彩 六 边 形 中 显示 新 的 配色 方案 。 
通过 在 拾 色 器 面板 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 Exit 命令 ， 完 成 退出 外 部 拾 色 器 
的 操作 ， 如 图 17-12 所 示 。 如 果 想 对 从 外 部 拾 色 器 获取 的 颜色 进行 调整 ， 也 可 以 双击 颜色 框 ， 通 过 
滑 杆 来 进行 调整 ， 如 图 17-13 所 示 。 


HTML 
Vv RGB 


HTML IR=1 6=81 B=170 


图 17-12 图 17-13 


如 果 对 颜色 的 明暗 度 不 满意 ， 可 以 通过 单 击 “ 整 体 色 彩 偏 移 ”面板 上 的 调整 按钮 ， 获 得 更 好 的 
配色 效果 ， 如 图 17-14 所 示 。 


图 17-14 
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此 软件 中 色彩 文件 的 输出 功能 ， 使 设计 师 在 团体 工作 时 就 色彩 意见 沟通 和 色彩 信息 共享 方面 有 
了 一 个 简单 的 解决 方案 。 通 过 共享 色彩 配置 文件 可 以 让 团队 内 的 色彩 设计 有 一 个 统一 的 标准 。 


默认 状态 下 ， 输 出 文件 被 保存 在 ColorKey 安装 目录 Key/output 文件 夹 下 ， 格 式 为 * html 或 者 *.ai。HTML 格式 使 
用 正 浏 览 器 可 以 打开 浏览 ，AI 格式 需要 安装 Adobe Illustrator 软件 才能 浏览 。 


单 击 操作 界面 中 的 “输出 配色 方案 ”按钮 ， 弹 出 “配色 方案 文件 输出 选项 ”对 话 框 ， 选 择 
输出 HTML 格式 配色 文件 或 者 Al 格式 配色 文件 ， 单 击 “ 输 出 文件 ”按钮 ， 如 图 17-15 所 示 。 
如 果 同 时 选择 “输出 后 打开 所 在 文件 夹 ”选项 ， 则 输出 后 会 自动 弹出 文件 保存 位 置 ， 如 图 17-16 
所 示 。 


GE ee | 
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cK 日 HTML 格式 配色 文件 
图 A 格式 怒 色 文件 
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图 17-15 图 17-16 


将 方案 发 布 为 HTML 格式 ， 使 用 IE 浏览 器 打开 ， 效 果 如 图 17-17 所 示 。 将 方案 发 布 为 Al 格式 ， 
使 用 lllustrator 打开 ， 效 果 如 图 17-18 所 示 。 


图 17-17 图 17-18 


廊 配 色 案 例 50: 品牌 女 鞋 网 页 配色 


在 该 案例 中 使 用 补 色 进行 色彩 搭配 , 对 比比 较 强 烈 , 容易 引起 浏览 者 的 注意 ， 
如 果 想 要 页 面 多 一 些 协调 、 柔 和 的 感觉 ， 可 以 适当 降低 颜色 的 明度 和 纯度 ， 便 可 
以 给 人 以 冷暖 相宜 、 清 丽 婉约 的 感觉 。 


Yr 


粉 和 青绿 色 呈 现 出 温馨 、 甜 美的 印象 ， 给 人 以 娇柔 靓丽 、 高 贵 典 ; 
， 与 黑 、 白 、 灰 无 彩色 进行 搭配 ， 增 加 了 品质 感 和 卓越 感 _， 
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@ 使 用 蔷薇 粉 可 以 体现 女性 的 柔美 与 娇嫩 ， 与 青绿 色 搭配 ， 明 度 和 纯度 都 适中 ， 对 比分 明 且 协 
调 一 致 ， 体 现 出 女性 的 高 贵 和 典雅 。 

@ 灰色 的 背景 增加 了 滕 胱 感 ， 给 人 以 婉约 、 优 雅 的 印象 ， 黑 色 和 白色 增加 了 品质 感 ， 给 人 以 高 
格调 、 高 品质 的 感觉 。 

(8) 色彩 的 分 布 清晰 明朗 ， 结 构 简单 且 有 层次 ， 强 势 中 蕴含 着 低调 ， 整 体 风格 既 显 品质 高 端 又 富 
有 亲和力 。 
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;第 4 步 : 插入 形状 和 文字 ， 完 成 底部 信 


Pink Shoes 
2013 Collection 


@ ”延伸 方案 
V 可 延伸 的 配色 方案 


Pink Shoe . Pink Shoes 
2013 Coliection HH 


Mew anwas on fooseshots 


New anal on fooseSnoes 


4 A 


加 ”相同 色 系 应 用 于 其 他 网 页 
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; 应 用 于 蛋糕 APP 网 页 ， 
| 太阳 楼、 著 蔽 粉 和 孔雀 蓝 给 人 以 阳光 、 青 春 、 优 质 的 感觉 ,; GD) 高 纯度 的 多 色 组 合 ,给 人 以 天 真 、 丰 富 、 艳丽 的 视觉 印象 。} 
| 多 色彩 的 点 级 体现 了 内 容 丰 富 、 约 丽 的 气氛 。 蔷 蔽 粉 的 背景 给 人 以 温馨、 甜美 的 印象 ， 体 现 出 难以 忘怀 | 
| @ 灰白 黑 的 加 入 ， 为 稍 时 杂乱 的 多 色 系 页 面 增加 了 稳定 感 。 ; 。 的 美好 岁月 ， 整 个 页 面 给 和 快乐 、 甜 守 的 感觉 


Adobe Color Themes 的 前 身 是 Adobe Kuler， 是 全 球 知名 软件 公司 Adobe 所 开发 的 一 款 色 彩 搭 
配 工具 ， 是 广大 设计 人 员 的 调 色 参考 工具 ， 如 图 17-19 所 示 。 


0 Wheel 


| Adobe Color Themes 中 的 色 | 
' 轮 使 用 色相 环 的 方式 展示 了 | 
， 颜色 的 过 渡 ， 并 且 比 色相 环 更 ， 
加 立体 地 展示 了 每 一 个 颜色 | 
， 在 色 轮 中 的 位 置 ， 通 过 颜色 的 
| 位 置 可 以 了 解 该 颜色 的 构成 ， 
， 并 且 了 解 该 颜色 的 饱和 度 。 


图 17-19 


使 用 Adobe Color Themes 可 以 根据 页 面 的 主 色 确定 配色 方案 ，Adobe Color Themes 会 提供 邻近 
色 、 互 补 色 以 及 相同 色相 的 不 同 明暗 和 色调 等 配色 方案 ， 既 可 以 做 整 幅 页 面 的 色彩 搭配 的 参考 ， 也 
可 以 用 来 纠正 色 偏 ， 以 达到 理想 的 和 谐 色 调 。 


面板 和 选项 卡 © 


启动 Adobe Photoshop CC 2018, 执行 “窗口 ”>“ 扩 展 功能 ”> Adobe Color Themes 命令 ， 即 
可 打开 该 面板 ， 如 图 17-20 所 示 。 
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;Adobe Color Themes 面板 中 有 | 
| Create、Explore 和 My Themes | 
| 三 个 标签 ， 依 序 为 “创建 ” “ 探 ， 
| 索 ” 和 “我 的 主题 ”三 个 选项 卡 ，， 
| 单 击 某 个 标签 即 可 打开 对 应 的 选 ， 
| 项 卡 面板 ， 通 过 设置 面板 中 的 各 | 
， 项 参数 调整 配色 方案 。 


图 17-20 
在 Adobe Color Themes 面板 的 Create( 创建 ) 选项 卡 中 ， 用 户 选 择 一 种 颜色 作为 主 色 ， 围 绕 这 
个 主 色 使 用 不 同 配色 方法 来 创建 配色 方案 。Explore( 探索 ) 选项 卡 中 则 为 用 户 准备 了 诸多 的 配色 方 
案 ， 用 户 可 以 打开 列表 在 不 同 的 配色 体系 中 进行 选择 ， 也 可 以 使 用 搜索 栏 搜索 其 他 配色 方案 。My 
Themes( 我 的 主题 ) 选项 卡 则 是 用 来 存储 用 户 通过 自己 的 配色 方案 。 


将 配色 颜色 设置 为 前 景色 


在 Create( 创 建 ) 选 项 卡 下 , 包括 Wheel( 色 轮 ) 和 Sliders( 滑 块 ) 两 个 选项 , 选择 Wheel( 色 轮 ) 选项 ， 
在 配色 方案 中 选择 其 中 一 个 颜色 ， 单 击 氏 按钮 可 以 将 其 设置 为 前 景色 ， 如 图 17-21 所 示 。 


修改 配色 方案 中 的 主 色 
在 配色 方案 中 ， 带 有 白色 填充 箭头 的 为 配色 方案 中 的 主 色 ， 其 他 颜色 根据 与 主 色 的 关系 产生 


会 随 着 主 色 的 变化 而 变化 。 如 果 要 设置 配色 方案 中 的 其 他 颜色 为 主 色 ， 将 光标 移动 到 该 颜色 处 ， 单 
击 黑色 描 边 的 箭头 ， 可 将 其 修改 为 主 色 ， 如 图 17-22 所 示 。 
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首先 在 配色 方案 中 选择 一 种 颜色 , 这 个 颜色 可 以 是 主 色 , 也 可 以 不 是 主 色 , 然后 在 “ 色 板 " 或 “ 拾 
色 器 "面板 中 选择 一 种 颜色 , 单 击 开 按钮 , 则 色 板 中 的 颜色 会 归 入 配色 方案 中 的 颜色 , 如 图 17-23 所 示 。 


图 17-24 


2 根据 与 主 色 的 关系 创建 方案 ”@ 


单 击 配色 方案 底部 的 圈 ( 配色 方法 ) 按钮 ， 可 打开 配色 方法 列表 ， 可 以 看 到 列表 中 有 7 种 配色 方 
法 可 供 选择 ， 分 别 是 Analogous( 相似 色 )、Monochromatic( 单 色 )、Triad( 三 色 组 合 )、Complementary 
(互补 色 )、Compound( 复合 色 )、Shades( 色调 ) 和 Custom( 自 定义 )。 

除 最 后 一 项 Custom( 自 定 义 ) 外 , 选择 其 中 任意 一 种 颜色 , 拖 动 色 轮 中 的 圆 点 在 色 轮 中 移动 位 置 ， 
在 修改 主 色 的 同时 ， 其 他 颜色 也 会 按 规律 发 生 相 应 的 变化 ， 如 图 17-25 所 示 。 


图 17-25 


) 1. Analogous (相似 色 ) py 


选择 使 用 “相似 色 ” 的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 色 轮 中 与 基色 相 
邻 的 颜色 进行 色彩 搭配 ， 相 似 色 的 色彩 搭配 通常 很 好 调和 ， 可 以 给 人 以 协调 、 舒 适 的 视觉 感受 ， 如 
17-26 所 示 。 
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图 17-26 


2.M onochrom atic( 单 色 ) 


选择 使 用 “ 单 色 ” 的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 该 颜色 的 饱和 度 和 
亮度 变化 来 创建 色彩 搭配 方案 。 使 用 此 颜色 规则 时 ，5 种 颜色 色 度 相同 ( 在 色相 环 上 看 到 的 是 同一 角 
度 ), 但 饱和 度 和 亮度 值 不 同 。 单 色 在 一 起 很 协调 ,给 人 以 视觉 上 的 舒适 和 统一 感 ， 如 图 17-27 所 示 。 
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图 17-27 


3.Triad (三 色 组 合 ) 》 


选择 使 用 “三 色 组 合 ” 的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 均匀 分 布 在 色 
轮 上 的 三 个 等 距 点 颜色 作为 色彩 搭配 方案 。 使 用 此 颜色 规则 时 ， 会 看 到 具有 相同 色 度 但 距离 色 轮 上 
第 一 个 点 的 饱和 度 和 亮度 值 不 同 的 两 个 颜色 、 距 离 色 轮 上 第 二 个 点 的 两 个 颜色 以 及 距离 色 轮 上 第 三 
个 点 的 一 个 颜色 ， 如 图 17-28 所 示 。 
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图 17-28 
“三 色 组 合 ”中 的 三 种 颜色 往往 会 形成 120” 的 对 比 ， 虽 然 没有 补 色 形成 的 对 比 强烈 ， 但 可 以 
保留 一 些 协调 性 。 


4. Com plem entary (互补 色 )) 


选择 使 用 “互补 色 ” 的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 基色 的 互补 色 来 
进行 色彩 搭配 。 使 用 此 颜色 规则 时 ， 会 在 色 轮 上 看 到 具有 与 基色 相同 色调 的 两 种 颜色 、 基 色 本 身 和 
具有 距离 色 轮 上 反 向 点 相同 色 度 的 两 种 颜色 。 使 用 补 色 的 色彩 搭配 ， 对 比 度 是 最 为 强烈 的 ， 在 视觉 
上 会 给 人 以 冲击 感 ， 吸 引 浏览 者 的 注意 ， 如 图 17-29 所 示 。 


5.Com pound (复合 色 ) 


选择 使 用 “复合 色 ” 的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 基色 的 互补 色 
和 相似 色 的 混合 色 。 使 用 此 颜色 规则 时 ， 你 会 看 到 具有 接近 基色 相同 色 度 的 两 种 颜色 、 基 色 本 身 
和 基色 的 补 色相 反 色 ， 但 彼此 邻近 的 两 种 颜色 、 复 合 色 颜色 与 补 色 颜 色 有 一 样 强 的 视觉 对 比 度 ， 
如 图 17-30 所 示 。 
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图 17-30 


6. Shades (色调 ) 


选择 使 用 “色调 ”的 搭配 方法 ，Adobe Color Themes 会 以 基色 为 基准 ， 使 用 具有 与 基色 相同 
相 和 饱和 度 ， 但 明暗 不 同 的 5 种 颜色 进行 色彩 搭配 。 使 用 此 颜色 规则 时 ， 在 视觉 上 是 最 为 舒适 的 ， 
在 风格 和 色调 上 给 人 以 高 度 统一 的 视觉 感受 ， 如 图 17-31 所 示 。 
Dungeon indiegogo E22 
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7.Custom ( 自 定义 ) 


列表 中 的 最 后 一 个 选项 为 “ 自 定 义 ”选项 ， 选 择 使 用 “ 自 定 义 ”的 搭配 方法 ， 可 以 手动 在 调 色 
板 中 选择 色 轮 上 的 颜色 ， 在 移动 其 中 一 个 颜色 的 操控 圆 点 时 ， 其 他 颜色 不 受 任何 颜色 规则 控制 ， 如 
图 17-32 所 示 。 
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图 17-32 


使 用 配色 软件 ColorSchemer Studio 2p 


ColorSchemer Studio 的 大 小 不 到 3MB， 配 色 功 能 却 很 强大 ， 目 前 最 新 版 本 是 ColorSchemer 
Studio 2.1.0， 已 经 非常 成 熟 ， 在 界面 、 配 色 、 取 色 、 预 览 、 方 案 分 享 等 方面 都 十 分 具有 实用 性 ， 用 
户 只 要 提供 一 种 基色 ， 就 能 按 配色 关系 快速 找到 与 该 颜色 相关 的 色彩 。 


ColorSchemer Studio 的 安装 与 启动 ”@ 


ColorSchemer Studio 拥有 汉化 版 ， 并 且 很 容易 就 可 以 在 网 页 上 搜 到 下 载 地 址 ， 下 载 后 双击 
ColorSchemer Studio 2.1.0 汉化 版 .exe 程序 ， 进 入 安装 界面 ， 连 续 单 击 “ 下 一 步 ”按钮 进行 安装 ， 如 
17-33 所 示 。 到 最 后 一 步 单 击 “ 完 成 ”按钮 完成 安装 ， 如 图 17-34 所 示 。 


奖 尖 全 用 ColorSchemer Studio 安装 ColorSchemer Studio 安装 向 导 完成 


单 击 完 成 乌 出 支 装 程序 。 
回 运行 Colorschemer Studio 


现在 将 安装 ColorSchemer studio v2.1 到 您 的 电脑 中 。 
推荐 您 在 继续 安装 前 关闭 所 有 其 它 应 用 程序 * 
单 击 下 一 步 继续 ,或 单 击 取 消退 出 安装 程序 。 


Ew>] CXFw |] Co] 
图 17-33 图 17-34 
安装 完成 后 ， 双 击 启动 ColorSchemer Studio 2.1.0 汉化 版 ， 即 可 打开 欢迎 界面 ， 该 软件 有 15 天 
的 试用 期 ， 用 户 可 以 单 击 “ 试 用 ColorSchemer Studio” 进 行 试 用 ， 也 可 以 单 击 “在 线 购 买 ”获取 许 
可 证 和 密 钥 ， 然 后 单 击 “ 输 入 许可 证 密 钥 ”进行 使 用 ， 如 图 17-35 所 示 。 
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图 17-35 


EE 界面 及 功能 区 域 的 划分 


ColorSchemer Studio 2.1.0 总 体 上 分 为 菜单 栏 、 功 能 导航 栏 、 颜 色 匹 配 区 、 颜 色 收藏 夹 和 信息 栏 
5 个 部 分 。 几 乎 所 有 的 操作 命令 ， 都 可 以 在 菜单 栏 中 找到 ， 颜色 收藏 夹 可 以 用 来 收藏 配色 方案 ;信息 
栏 会 显示 所 选 颜色 的 模式 和 参数 值 ， 颜 色 匹 配 区 则 是 进行 配色 的 地 方 ， 如 图 17-36 所 示 。 


Er 菜单 栏 
Pr wm -| 功能 导航 栏 


> 


颜色 收藏 夹 


颜色 匹配 区 


信息 栏 


图 17-36 
其 中 功能 导航 栏 包括 “匹配 颜色 ”“ 图 库 浏览 器 ”“ 图 像 方案 ”“ 快 速 预览 ”和 “始终 在 
项 部 ”5 个 功能 选项 ， 也 是 该 软件 功能 的 基本 组 成 。 例 如 单 击 功能 导航 栏 上 的 “始终 在 顶部 ” 按 
钮 再 ， 当 该 按钮 处 于 被 按 下 的 状态 时 ，ColorSchemer Studio 2.1.0 的 窗口 会 始终 处 于 屏幕 的 上 方 ， 不 
会 被 其 他 软件 的 窗口 所 遮盖 ， 如 图 17-37 所 示 。 
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< 创建 匹配 颜色 方案 © 


“匹配 颜色 ”选项 卡 中 包含 “基本 颜色 ” “匹配 颜色 ”和 “ 调 色 板 ” 三 个 面板 ,用 来 进行 颜色 的 选 
择 、 调 整 和 匹配 ， 如 图 17-38 所 示 。 


如 加 | 固 ”Y tw 


1. 设置 三 原色 ， 

单 击 “ 匹 配 颜色 ”面板 右上 角 的 小 三 角 按钮 ， 可 以 选择 三 原色 的 种 类 。 一 种 是 “ 红 黄 蓝 " ， 一 
种 是 “ 红 绿 蓝 ” ， 通 过 选择 不 同 的 三 原色 可 以 看 到 ， 在 不 同 的 三 原色 的 色 轮 上 ， 互 补 色 是 不 同 的 ， 
如 图 17-39 所 示 。 


2. 基本 状 色 ， 


“基本 颜色 ”面板 是 用 来 选取 基本 颜色 的 ， 其 中 又 包含 RGB、“ 光 源 ” 和 “ 库 ” 三 个 选项 卡 以 
及 底部 的 一 个 小 工具 栏 。RGB 选项 卡 中 首先 是 一 个 颜色 框 ， 显 示 所 选 颜色 的 色相 ， 然 后 是 RGB 模式 
的 调整 区 域 ， 可 以 通过 在 文本 框 中 输出 数值 和 移动 滑 块 对 颜色 进行 调整 。 

当然 这 里 不 仅 有 RGB, 默认 状态 下 , 还 包括 HSB 模式 和 “十 六 进 制 值 ”， 用 户 可 以 通过 在 “十 六 
进 制 值 ” 的 文本 框 中 输入 参数 来 修改 颜色 ， 也 可 以 对 参数 进行 复制 。 另 外 单 击 “ 基 本 颜色 ”右上 角 
的 小 三 角 按 钮 ， 依 次 选择 “调整 滑 块 ”> HSL 命令 ， 可 以 将 HSB 模式 替换 为 HSL 模式 ， 如 图 17-40 
所 示 。 
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图 17-40 

“光源 ”选项 卡 中 包含 拾 色 器 ， 选 取 颜 色 后 ， 也 可 以 通过 “光源 ”选项 卡 来 调整 颜色 的 明暗 以 
选择 其 他 色相 ， 如 图 17-41 所 示 。“ 库 ”选项 卡 中 则 有 成 千 上 万 个 颜色 选项 ， 打 开 Crayon Colors 右 
侧 向 下 的 三 角形 按钮 ， 可 以 选择 另外 两 个 颜色 库 ， 三 个 颜色 库 分 别 是 蜡笔 颜色 、HTML 颜色 和 Web 
安全 色 ， 如 图 17-42 所 示 。 

单 击 “ 基 本 颜色 ”面板 底部 的 吸管 图 标 2@|， 可 以 通过 在 屏幕 内 任何 位 置 单 击 来 获取 颜色 。 单 击 
随机 图 标 加 ， 可 以 随机 获取 一 个 颜色 ， 如 图 17-43 所 示 。 

单 击 复制 颜色 图 标 赔 四， 可 以 复制 所 选 颜色 的 RGB 或 十 六 进 制 参数 。 单 击 转换 网 页 安全 色 图 标 
[网 ， 可 以 将 所 选 颜色 转换 成 最 接近 的 网 页 安全 色 ， 如 图 17-44 所 示 。 


Ci 
RE | 者。 并 


二 


HT omed Co 
2 
日 | 
国 
国 
国 
EE 呈 
国 
国 
国 
国 
国 
国 
国 
国 
国 = 
| 
se 
a i | Z 回 | 则 > VY webeie 255, 255, 255 
图 17-41 图 17-42 图 17-43 图 17-44 


3. 匹配 颜色 


“匹配 颜色 ”面板 中 包括 “ 色 轮 ”“ 实 时 方案 ” “混合 器 ”和 “渐变 ”4 个 选项 卡 。 
加 色 轮 

单 击 “ 色 轮 ” 选 项 卡 ， 可 以 看 到 选项 卡 的 中 间 以 十 二 色相 环 组 成 的 色 轮 。 在 色 轮 上 任意 一 个 关 
色 上 单 击 , 在 弹出 的 菜单 中 选择 “复制 " 命令 ， 即 可 复制 RGB 或 十 六 进 制 参数 选择 “ 设 为 基本 颜色 ” 
命令 ， 即 可 将 该 颜色 设置 为 基色 ， 如 图 17-45 所 示 。 而 所 选 基色 是 配色 的 基本 依据 。 
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图 17-45 

默认 状态 下 ， 基 色 会 处 于 色 轮 最 上 方 并 凸 出 。 > 
显示 ， 通 过 右 侧 的 规则 颜色 按钮 - 可 以 打开 颜色 
规则 列表 ， 如 图 17-46 所 示 。 

列表 中 包含 Color Wheel( 十 二 色相 )、 
Complements( 补 色 )、Split-Complements( 分 
割 补 色 )、Trads( 三 色 组 )、Tetrads( 四 色 组 )、 
Analogous( 类 似 色 ) 和 Monochromatic( 单 色 )7 个 
选项 。 用 户 可 以 逐一 单 击 查看 各 选项 下 配色 与 基 
色 的 关系 。 

例如 当选 择 Split-Complements( 分 割 补 色 ) 
选项 时 ， 色 轮 上 会 同时 选中 三 种 颜色 ， 分 别 是 基 
色 和 基色 的 补 色 的 两 个 邻近 色 ， 如 图 17-47 所 示 。 图 17-46 

当选 择 Tetrads( 四 色 组 ) 选项 时 ， 色 轮 上 会 同时 选择 4 种 颜色 ， 这 4 种 颜色 分 别 是 基色 、 与 基 
色相 距 90? 的 颜色 、 基 色 的 补 色 和 与 基色 相距 90” 颜色 的 补 色 ， 这 4 种 颜色 在 色 轮 上 平均 分 布 ， 中 
间 都 相距 90” ， 如 图 17-48 所 示 。 
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图 17-47 图 17-48 


分 割 补 色 
选择 使 用 “分 割 补 色 ”的 搭配 方法 ， 配 色 会 降低 补 色 的 强烈 感 ， 减 少 视觉 上 的 刺激 ， 但 依然 显 
得 色彩 分 明 、 鲜 艳 、 华 丽 ， 如 图 17-49 所 示 。 
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图 17-49 
四 色 组 
因为 4 种 颜色 中 每 两 种 相近 的 颜色 在 色 轮 上 的 角度 都 是 大 于 90”、 小 于 120” 的 对 比 色 ， 因 此 
这 种 配色 会 给 人 色彩 丰富 的 感觉 ， 但 不 会 产生 过 分 的 视觉 刺激 ， 如 图 17-50 所 示 。 
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图 17-50 
实时 方案 
“实时 方案 ”选项 卡 的 顶部 有 一 个 小 工具 栏 ， 单 击 工具 栏 上 的 “新 建 方案 ”按钮 如 ， 可 以 迅速 
清除 色 轮 上 的 其 他 颜色 ， 只 保留 基色 ， 如 图 17-51 所 示 。 单 击 “ 保 存 ” 按 钮 ， 在 弹出 的 对 话 框 中 输 
入 名 称 ， 可 保存 配色 方案 ， 如 图 17-52 所 示 。 


Cere 
RN 二 车 


Bale- 6 天 向 


图 
图 17-51 图 17-52 


单 击 “ 添 加 颜色 ”按钮 ， 可 以 打开 添加 颜色 列表 ， 选 择 列表 中 的 配色 选项 ， 即 可 将 该 选项 的 颜 
[ 扬 
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色 添 加 到 配色 方案 中 ， 如 图 17-53 所 示 。 用 户 可 以 在 色相 环 上 看 到 方案 中 各 颜色 的 位 置 ， 各 颜色 也 
会 在 下 面 以 色 块 的 方式 排列 ， 如 图 17-54 所 示 。 


图 17-53 图 17-54 
如 果 拖 动 色相 盘 中 的 基色 控制 点 ， 则 配色 会 根据 当前 所 选 的 配色 规则 随 基色 的 变化 而 发 生变 化 ; 
如 果 拖 动 色相 盘 中 的 配色 控制 点 ， 则 基色 不 会 发 生变 化 ， 在 这 个 过 程 中 实际 上 已 经 修改 了 配色 规则 ， 
如 图 17-55 所 示 。 
在 色相 盘 中 ， 基 色 控 制 点 的 圆 点 比较 大 ， 配 色 控 制 点 的 圆 点 比较 小 。 在 色相 盘 中 ， 选 择 其 中 一 
种 颜色 ， 单 击 “ 删 除 颜 色 ” 按 钮 @， 即 可 删除 该 颜色 ， 如 图 17-56 所 示 。 
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图 17-55 图 17-56 


“实时 方案 " 选项 卡 中 的 工具 栏 右 侧 有 两 种 显示 方式 , 默认 显示 Scheme Builder( 创建 方案 ) 面板 ， 
单 击 Scheme Brower( 浏览 方案 ) 按钮 画 ， 则 会 以 列表 的 方式 显示 配色 方案 。 
用 户 可 以 单 击 Del 按钮 删除 某 个 配色 方案 ， 站 可 以 机 Add 按钮 将 所 选 方案 中 的 颜色 添加 到 右 


侧 的 “颜色 收藏 夹 ”, 如 图 17-57 所 示 。 :ss = 二 J 
© 混合 器 睛 日 @-@0 于 记功 男 一 
合 Cy s 加 b 人 snd pms a 
单 击 “ 混 合 器 ”选项 卡 ， 可 以 设 国 国 画面 面 国 | 


置 一 种 颜色 到 另 一 种 颜色 的 过 渡 ， 选 择 

第 一 种 颜色 块 ， 在 下 面 的 “ 调 色 板 ” 中 ~ 
选择 一 种 颜色 ， 或 直接 将 颜色 拖 入 该 色 国 加 加 ”图 
块 中 ， 选 择 第 二 种 颜色 块 ， 使 用 相同 的 

种 颜色 到 第 二 种 颜色 的 过 渡 ， 可 以 打开 

“方向 ”列表 ， 选 择 变化 规则 ， 也 可 以 ~*~ 

通过 修改 步 数 的 数值 来 确定 配色 的 数 国 国 国 国 加 加 - 
量 ， 如 图 17-58 和 图 17-59 所 示 。 本 Xe 
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图 17-58 图 17-59 
© 渐变 
在 “渐变 ”选项 卡 中 ， 实 际 演示 的 是 基色 的 变化 。 最 中 间 、 最 大 的 颜色 是 基色 ， 其 他 颜色 都 是 
基色 的 变化 过 程 ， 如 图 17-60 所 示 。 


“渐变 ”实际 上 是 指 一 种 颜色 到 另 一 种 颜色 的 变化 过 程 ， 这 种 过 程 可 以 在 “混合 器 ”中 看 到 ,这 里 被 命名 为 “ 混 
合 器 ”或 许 是 翻译 有 所 误差 。 


在 下 拉 列 表 中 可 以 选择 变化 方式 ， 而 “亮度 ”后 面 的 数值 ， 其 实 可 以 理解 为 程度 ， 无 论 选择 何 
种 变化 方式 ， 当 数值 为 0 时 ， 所 有 颜色 都 会 变 成 基色 ， 而 当 数 值 为 100 时 ， 无 论 是 亮度 、 色 相 还 是 
饱和 度 ， 变 化 最 为 强烈 ， 如 图 17-61 所 示 。 
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图 17-60 图 17-61 


“ 调 色 板 ” 中 默认 为 216 种 Web 安全 色 , 单 击 向 下 的 小 三 角 按钮 ， 可 以 打开 列表 选择 其 他 选项 ， 
还 可 以 将 自 定义 的 调 色 板 导入 或 载 入 ， 如 图 17-62 所 示 。 
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虽 使 用 图 库 浏览 器 获取 配色 方案 


单 击 功能 导航 栏 中 的 “图 库 浏览 器 ”按钮 ， 可 以 链接 到 官网 图 库 ， 里 面 有 多 达 百 万 种 现成 的 配 
色 方 案 可 供 选择 和 收藏 ， 也 可 以 通过 在 搜索 栏 中 输入 名 称 进行 搜索 (输入 后 按 Enter 键 )， 然 后 将 颜 
色 方案 添 加 到 颜色 收藏 来 ， 如 图 17-63 所 示 。 
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从 图 像 获 取 配 色 方案 


单 击 功能 导航 栏 中 的 “图 像 方案 ”选项 ， 单 击 “ 打 开 ” 按 钮 ， 打 开 一 张 图 片 ，ColorSchemer 
Studio 会 自动 分 析出 图 片 中 的 主要 颜色 ， 如 图 17-64 所 示 。 
默认 识别 图 片 中 的 5 种 颜色 ， 颜 色 数量 最 多 可 以 设置 成 10 种 ， 单 击 “ 马 赛 克 ” 按 钮 ， 图 片 会 以 
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图 17-64 图 17-65 
将 光标 移动 到 某 个 颜色 上 ， 会 自动 生成 一 条 直线 连接 图 像 中 的 圆 点 以 标注 该 颜色 在 图 片 中 的 位 
置 ， 拖 动 颜色 标志 点 ， 随 着 标志 点 的 变化 ， 代 表 着 该 点 的 颜色 框 也 会 发 生变 化 ， 如 图 17-66 所 示 。 
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图 17-66 
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使 用 颜色 收藏 夹 进行 快速 预览 


前 面 已 经 介绍 过 将 颜色 方案 放 到 颜色 收藏 夹 的 方式 ， 只 需要 在 各 选项 卡 面板 中 单 击 “ 添 加 ” 按 
钮 =9 即 可 。 颜 色 收藏 夹 包括 “颜色 ”和 “颜色 组 ”， 一 个 配色 方案 中 至 少 有 两 种 或 两 种 以 上 的 颜色 
才 会 被 称 为 方案 ， 因 此 单独 的 颜色 在 配色 软件 中 并 无 意义 。 


如 果 要 自 定义 配色 方案 , 可 以 单 击 "收藏 夹 颜色 "面板 底部 的 "新建 组 "按钮 ,在 文本 框 中 输入 名 称 ， 
可 为 颜色 组 命名 。 将 颜色 匹配 区 中 的 颜色 拖 动 到 颜色 收藏 夹 中 , 可 添加 单个 的 颜色 , 如 图 17-67 所 示 。 
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单 击 “收藏 夹 颜色 "面板 底部 的 “ 重 命名 " 按钮 , 在 文本 框 中 修改 内 容 , 可 为 颜色 或 颜色 组 重 命名 ， 
如 图 17-68 所 示 。 单 击 “ 删 除 ”按钮 ， 可 删除 颜色 或 颜色 组 ， 如 图 17-69 所 示 。 


单 击 收藏 夹 底部 的 Contrast Analyzer 按 钮 , 可 以 看 到 当 配色 方案 中 的 颜色 成 为 文字 色 或 背景 色 时 ， 


文字 与 背景 的 配色 效果 如 图 17-70 所 示 。 当 设置 方案 中 的 颜色 为 背景 色 时 , 会 自动 给 出 最 佳 的 文字 色 
而 当选 择 的 颜色 为 文字 色 时 ， 会 自动 给 出 最 佳 背 景色 ， 如 图 17-71 所 示 。 
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单 击 功能 导航 栏 中 的 “快速 预览 ”按钮 ， 可 以 打开 “快速 预览 ”对 话 框 。 从 右 侧 列表 中 可 以 选 
择 常 用 的 网 页 排版 方式 。 然 后 从 颜色 收藏 夹 中 拖 动 颜色 到 “快速 预览 ”对 话 框 中 的 文字 或 形状 上 ， 
可 以 为 形状 和 文字 添加 该 颜色 ， 如 图 17-72 所 示 。 

单 击 右上 角 的 Select Layout( 调整 布局 ) 按钮 ， 隐 藏 堪 侧 模板 列表 。 显 示 整 个 网 页 结构 ， 拖 动 对 
话 框 的 边线 ， 可 以 调整 和 观看 整 版 网 页 的 布局 和 结构 ， 如 图 17-73 所 示 。 单 击 “ 保 存 ” 按 钮 ， 可 以 
将 其 保存 为 图 片 。 
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图 17-72 图 17-73 


导出 与 分 享 © 


ColorSchemer Studio 不 仅 可 以 保存 为 自己 的 格式 ， 还 能 导出 为 各 种 格式 的 调 色 板 ， 创 建 的 配色 
方案 可 以 在 多 种 设计 软件 中 使 用 。 下 面 以 最 常见 的 Photoshop 和 llustrator 为 例 ， 讲 述 配 色 方案 的 导 
出 和 使 用 过 程 。 


】 1. 导出 为 Adobe Photoshop 调 色 板 


执行 “文件 ” >“ 导出 向 导 ” 命 令 ， 如 图 17-74 所 示 。 弹 出 “导出 向 导 ” 对 话 框 ， 在 格式 列表 
中 选择 “Adobe Photoshop 调 色 板 ”， 单 击 Next 按钮 ， 如 图 17-75 所 示 。 输 入 颜色 名 称 并 选择 存储 
路 径 ， 然 后 单 击 Export 按钮 ， 如 图 17-76 所 示 。 


号 出 文件 颜色 : 
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图 17-74 图 17-75 图 17-76 
启动 Adobe Photoshop CC 2018， 执行“ 窗口 ”>“ 色 板 ” 命 令 ， 打开 “ 色 板 ”面板 ， 单 击 右上 
角 的 打开 菜单 按钮 ， 在 弹出 的 菜单 中 选择 “ 载 入 色 板 ”命令 , 如 图 17-77 所 示 。 弹出 “ 载 入 ”对 话 框 ， 
找到 存储 位 置 ， 选 择 刚 刚 从 ColorSchemer Studio 导出 的 .aco 格式 的 文件 ， 单 击 “ 导 入 ”按钮 ， 如 图 
17-78 所 示 ， 导 入 的 颜色 将 被 添加 到 “ 色 板 ”面板 中 ， 如 图 17-79 所 示 。 


Photoshop CC 网 页 配色 设计 全 程 揭秘 ( 第 2 版 ) 
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图 17-77 


| 2. 导出 为 Adobe lllustrator 调 色 板 D 


使 用 与 上 一 步 相同 的 方法 打开 “导出 向 导 ” 对 话 框 ， 设 置 文件 名 和 存储 位 置 ， 在 格式 列表 中 选 
择 “Adobe Illustrator 调 色 板 ”， 如 图 17-80 所 示 ， 单 击 Export 按钮 ， 如 图 17-81 所 示 。 


导出 文件 颜色 : 
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启动 Adobe lllustrator CC 2018， 执行“ 窗口 ”>“ 色 板 ” 命 令 , 打开 “ 色 板 ”面板 ， 单 击 打 开 
菜单 按钮 ， 在 弹出 的 菜单 中 选择 “打开 色 板 库 ”>“ 其 它 库 ” 命 令 ， 如 图 17-82 所 示 。 打 开 刚 才 
从 ColorSchemer Studio 导出 的 Al 文件 ， 如 图 17-83 所 示 ， 即 可 打开 以 文件 名 称 命名 的 色 板 ， 如 图 
17-84 所 示 。 
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